Question

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

我使用.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>

Console.log：

Vue.js devtool对象：

Answer 1

Map不会改变数组，它会返回一个新数组。

所以this.stocks = data.map(item => item.fields) 或[[ item.fields.stockName ]]

编辑：而且，数据必须是一个函数

Answer 2

由于您先前已经声明了stocks属性，因此无需担心reactivity，但是，我相信您也应该对模板进行一些更改。还请注意how you write your data。

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>
...

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

2 个答案: