v-for table dynamically vuejs3

Question

I´m doin a axios.get() to route laravel, that this route it´s ok, return all my data in json, and i´m tryiying to fill my table. I have a array that it´s filled with axios get.

if i do console.log() with my array, have data. but if i do v-for with this array... i can´t show data.

<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>

this it´s a result from my query

[{"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"}]

i´m new with vuejs 3, with vuejs 2 i can to do this.

Thanks for read me and your answers

Answer 1

You used a wrong syntax for for-loop, simple it's like this in Vue 2 and 3:

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

You should use i as the array index for key prop, then Vue will be able to update the DOM if the array being changed.

And your case would be like this:

<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>