表动态vuejs3

Question

我正在做一个axios.get()来安排拉里威尔的路线，这条路线是可以的，用json返回我所有的数据，我正试图填满我的桌子。我有一个数组，它充满了axios get。

如果我用数组执行console.log()，那么就有数据。但如果我用这个数组.我不能显示数据。

<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，和vuejs 2我可以这样做。

谢谢你读我和你的答案

Answer 1

您对换环使用了错误的语法，很简单，在Vue 2和3中如下所示：

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

您应该使用i作为key支柱的数组索引，如果数组被更改，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>