My goal is to display data in an html table using the Vue.js v-for directive. However, I'm encountering issues with building the table. I suspect that the data format is incorrect, and I may need to manipulate it to eliminate the object layer (index of each item).
I attempted to use the .map function without success.
Vue.js
callStocks = function () {
var app = new Vue({
delimiters: ["[[", "]]"],
el: "#stocksTable",
data: {
stocks: []
},
created() {
axios
.get("getStocksAvailable/")
.then(response => {
var data = response.data.data
this.stocks = data.map(item => item.fields)
console.log (data)
});
}
});
};
callStocks();
<table>
<thead>
<tr>
<th>Company</th>
</tr>
</thead>
<tbody id="stocksTable">
<tr>
<td v-for="item in stocks">[[ item.stockName ]]</td>
</tr>
</tbody>
</table>
Console.log:
https://i.sstatic.net/JbvhA.jpg
Vue.js devtool object: