循环 json 与 Vue.js 以填充 html 表

Question

在页面加载时，我从数据库中获取一些 json 格式的数据。 现在我想使用 Vue.js 来循环 json 并构建一个 html 表。

Javascript/Vue.js 部分：

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结构：

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

现在前端不渲染任何东西。 但是，我没有收到来自 Vue的任何错误，并且已实施的console.log在上面的示例中显示了正确的项目Infineon 。 我假设从 Vue 到前端变量的传输不起作用。

注意：我使用[[...]]定界符，因为我的 Django 框架保留了大括号。 我在另一个成功运行的项目中有这个，这不应该是这里的问题。

Answer 1

// 更新：vue devtool 上的 json 显示info不是你想要的数组，你可以这样做： this.info = response.data.data in the .then来获取正确的数据。

然后试试这个

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

在模板中使用stockName