如何将 JSON 对象转换为 Vue v-for 兼容格式

Question

我想使用填充一个html表。但是，它不会生成表。我的猜测是数据输入的格式不正确，因此需要映射/更改以删除对象层（每个项目的索引）。Vue.js v-for

我尝试过使用它，但它不起作用。.map

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>

控制台.log：

Vue.js devtool object：

Answer 1

Map 不会改变数组，它会返回一个新数组。所以要么要么this.stocks = data.map(item => item.fields)[[ item.fields.stockName ]]编辑：另外，数据必须是函数

Answer 2

由于您之前已经声明了属性，因此您不必担心反应性，但是，我相信您也应该稍微更改一下模板。还要注意如何编写数据。stockscallStocks = function () {&nbsp; &nbsp; var app = new Vue({&nbsp; &nbsp; &nbsp; &nbsp; delimiters: ["[[", "]]"],&nbsp; &nbsp; &nbsp; &nbsp; el: "#stocksTable",&nbsp; &nbsp; &nbsp; &nbsp; data: () => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stocks: []&nbsp; &nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; &nbsp; created() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .get("getStocksAvailable/")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = response.data.data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.stocks = data.map(item => item.fields)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log (data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });};callStocks();您的模板是在单行内迭代，我相信您想每行添加一个股票名称。...<tbody id="stocksTable">&nbsp; <tr v-for="item in stocks">&nbsp; &nbsp; <td>[[ item.stockName ]]</td>&nbsp; </tr></tbody>...