Loop json with Vue.js to populate a html table

Question

On page load I fetch some data in json format from the database. Now I would like to use Vue.js to loop that json and build a html table.

Javascript/Vue.js part:

callStocks = function () {
          var app = new Vue({
            delimiters: ["[[", "]]"],
            el: "#stocksTerminal",
            data: {
              stocks: []
            },
            created() {
              axios
                .get("getStocksAvailable/")
                .then(response => {
                  this.stocks = response.data.data;
                  console.log(response.data.data[0].fields.stockName);
                });
            }
          });
};

callStocks();

HTML structure:

<table>
 <thead>
  <tr>
   <th>Company</th>
  </tr>
 </thead>
 <tbody id="stocksTerminal">
 <tr>
  <td v-for="item in stocks">[[ item.fields.stockName ]]</td>
 </tr>
 </tbody>
</table>

Json object:

Right now the frontend doesn't render anything. However I don't have any errors from Vue and the implemented console.log shows the correct item Infineon in the above example . I assume that the transmission from Vue to the variable in the fronend doesn't work.

Note: I use [[...]] delimiter since my Django framework preserves curly brackets. I have this in another project running successfully and this shouldn't be the issue here.

Answer 1

// Update: The json on vue devtool show that info is not an array you want, you may do this: this.info = response.data.data in the .then to get the correct data.

Then try this

<td v-for="stockName in info">[[ stockName.fields.stockName ]]</td>

Use stockName in template