v-for表动态vuejs3

Question

我要doin a axios.get（）将laravel路由，这是可以的，可以返回我的所有数据，然后我正在尝试填充我的表格。我有一个装有Axios Get的数组。

如果我在数组中执行console.log（），请使用数据。但是，如果我对此数组进行v-for ...我可以显示数据。

<template>
  <div class="tabla offset-md-1">
        <table class="table table-hover table-striped">
            <thead>
                <th v-for="column in columns">
                    {{ column.label }}
                </th>
            </thead>
            <tbody>
                <tr v-for="data in treatment" v-bind:value="index">
                    <td>{{ data.id }}</td>
                    <td>{{ data.nombre_tratamiento }}</td>
                    <td>{{ data.compania.nombre }}</td>
                    <td>{{ data.precio_sesion }}</td>
                    <td><a href="#" class="btn btn-info">Edit</a></td>
                    <td><a href="#" class="btn btn-info">Remove</a></td>
                </tr>
            </tbody>
        </table>
        <div class="alert alert-success d-none" role="alert" id="correcto"></div>
        <div class="alert alert-danger d-none" role="alert" id="error"></div>
    </div>
</template>

<script>
    export default {
        created: function () {
            axios.get('/treatmentCompany/getAllTreatmentCompany')
            .then((response) => {
                this.treatment = response.data;
            })
            .catch(error => console.log(error))
        },
        methods: {
            remove(event) {
                if(confirm("Do you really want to delete?")){

                    axios.post('/treatmentCompany/destroy', {treatment: event}).then(
                        (data) => {
                            this.treatment = data
                            window.location.replace(response.data);
                        }
                    ).catch(error => console.log(error))
                }
            },
        },
        data(){
            return {
                searchTerm: '',
                treatment: [],
                
                columns: [
                    {
                        label: 'ID',
                        field: 'id',
                    },
                    {
                        label: 'Name',
                        field: 'nombre_tratamiento',
                    },
                    {
                        label: 'Price',
                        field: 'precio_sesion',
                    },
                    {
                        label: 'Edit',
                        field: 'edit'
                    },
                    {
                        label: 'Remove',
                        field: 'remove'
                    },
                ],                
            };
        },
    };
</script>

这是由我的查询产生的，

[{"id":5,"nombre":"aaa","apellidos":"ggggaas","tlf1":222,"tlf2":2222,"created_at":"2022-06-08T06:44:09.000000Z","updated_at":"2022-06-14T11:12:12.000000Z"},{"id":6,"nombre":"ddd","apellidos":"ddd","tlf1":2222,"tlf2":2222,"created_at":"2022-06-13T15:02:28.000000Z","updated_at":"2022-06-13T15:02:28.000000Z"}]

我是新的vuejs 3，而我可以做到这一点。

感谢您阅读我和您的答案

Answer 1

您使用了错误的语法，以 for-loop ，简单地在vue 2和vue 2和3：

<div v-for="(item, i) in items" :key="i" >
{{item}}
</div>

您应该使用i作为键 prop的数组索引，然后Vue如果更改数组，Vue将能够更新DOM。

您的情况就是这样：

<template>
  <div class="tabla offset-md-1">
    <table class="table table-hover table-striped">
      <thead>
        <th v-for="(column, i) in columns" :key="i">
          {{ column.label }}
        </th>
      </thead>
      <tbody>
        <tr v-for="(data, i) in treatment" :key="i">
          <td>{{ data.id }}</td>
          <td>{{ data.nombre_tratamiento }}</td>
          <td>{{ data.compania.nombre }}</td>
          <td>{{ data.precio_sesion }}</td>
          <td><a href="#" class="btn btn-info">Edit</a></td>
          <td><a href="#" class="btn btn-info">Remove</a></td>
        </tr>
      </tbody>
    </table>
    <div class="alert alert-success d-none" role="alert" id="correcto"></div>
    <div class="alert alert-danger d-none" role="alert" id="error"></div>
  </div>
</template>