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

Question

我想使用填充一个html表。但是，它不会生成表。我的猜测是数据输入的格式不正确，因此需要映射/更改以删除对象层（每个项目的索引）。Vue.js v-for我尝试过使用它，但它不起作用。.mapVue.jscallStocks = 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

由于您之前已经声明了属性，因此您不必担心反应性，但是，我相信您也应该稍微更改一下模板。还要注意如何编写数据。stocks

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

您的模板是在单行内迭代，我相信您想每行添加一个股票名称。

...

<tbody id="stocksTable">

  <tr v-for="item in stocks">

    <td>[[ item.stockName ]]</td>

  </tr>

</tbody>

...