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

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>

That might not be the only problem, but as mentioned in an answer below, v-for must have a :key or v-bind:key directive. From the official documentation: In 2.2.0+, when using v-for with a component, a key is now required. — K. P.
– K. P., Commented Feb 21, 2020 at 22:35

waleed .alfaifi · Accepted Answer · 2020-02-21 20:03:28Z

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>

answered Feb 21, 2020 at 20:03

waleed .alfaifi

111 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2020-02-21 20:12:20Z

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;
});

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related