dynamic V-for shows no result (Vue.js) - html

Question

I'm trying to fill an array with a list of objects that comes from an api, the objects are coming normally, but when trying to move to the array and play in the v-for nothing appears.
Here's my data vars:
data() {
return {
elementsReport: [],
};
},
Here's my "computed" section:
computed: {
changeElements: {
get() {
return this.elementsReport;
},
set() {
return this.elementsReport;
}
}
}
Here's my api call:
this.elementsReport = this.getHistoryDeliveryPositionsByDriverIdAndDateAPI();
Here's my api function:
getHistoryDeliveryPositionsByDriverIdAndDateAPI() {
axios
.post("/web-api/reports/history-delivery-position/generate", {
driver_id: this.driver,
initial_date: this.initialDate,
final_date: this.finalDate
})
.then(({ data }) => {
_this.elementsReport = data;
})
.catch(function() {
alert("Erro ao filtrar relatórios");
});
}
Here's my html table with the v-for:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr v-for="elements in changeElements">
<td scope="row">{{elements.id}}</td>
<td></td>
</tr>
</tbody>
</table>

Answer 1

Have you tried to bind the key prop to the tr element?
Like this:
<tr v-for="elements in elementsReport" :key="elements.id">
<td scope="row">{{elements.id}}</td>
<td></td>
</tr>

Answer 2

Lots of things wrong with your code. I would recommend using tutorials to learn JavaScript and Vue.
1) There is no need for a computed here. Use elementsReport in the template.
<tr v-for="elements in elementsReport" :key="elements.id">
<td scope="row">{{elements.id}}</td>
<td></td>
</tr>
2) Your API function is wrong, and you are trying to set elementsReport twice. It should be:
getHistoryDeliveryPositionsByDriverIdAndDateAPI() {
return axios
.post("/web-api/reports/history-delivery-position/generate", {
driver_id: this.driver,
initial_date: this.initialDate,
final_date: this.finalDate
})
.then(({ data }) => {
return data;
})
.catch(function() {
alert("Erro ao filtrar relatórios");
});
}
3) Call it like:
this.getHistoryDeliveryPositionsByDriverIdAndDateAPI().then(data => {
this.elementsReport = data;
});