Vue JS V-for 不渲染答案

【问题标题】：Vue JS V-for not renderingVue JS V-for 不渲染
【发布时间】：2020-11-07 11:31:21
【问题描述】：

为初学者的问题道歉。我是 Vue 的初学者，一直在努力理解为什么我的 v-for 没有呈现任何数据。我可以在data 的 Vue 控制台中看到该数组，但是该表没有呈现。

下面是我的代码：

HTML：

<div id="app">
  <div class="container">
    <table class="table">
      <thead class="t-head-light">
        <tr>
            <th>Description</th>
            <th>Year 1</th>
            <th>Year 2</th>
            <th>Year 3</th>
            <th>Year 4</th>
            <th>Year 5</th>
        </tr>
    </thead>
    <tbody>
      <tr v-for="item in transactions">
        <td>{{item.account_category}}</td>
      </tr>
    </tbody>
    </table>
  </div>
</div>

Vue JS：

var vm = new Vue({
  el: '#app',
  data: {
    transactions: []
  },
  mounted: function(){
      this.fetchTransactions()
  },
  methods:{
    fetchTransactions: function(){
      var url = 'http://127.0.0.1:8000/scenarios/transactions'
      fetch(url)
        .then((resp) => resp.json())
        .then(function(data){
        vm.transactions = data;
      })
    }
  }
})

只是想知道我做错了什么。

编辑：

感谢您的回复，我的交易数据如下所示：

我也会调查computed 的交易。

编辑 2： 感谢您的回复，我发现这是我在 HTML 中使用的花括号。由于我使用 Django 作为后端，我认为它在 jinja 和 vue 之间感到困惑。我已经将 Vue 的默认分隔符更改为方括号，现在它可以工作了。

【问题讨论】：

更好地使用 Vue.js 的 COMPUTED 属性。还有一个琐碎的问题，你肯定会用正确的结构获得data（在vm.transactions = data;之前用console.log(data);控制它？也许使用this.transactions而不是vm.transactions
如果你添加data的输出，我可以告诉你如何使用Vue.js的COMPUTED属性（因为我无法获取你的交易数据）
哦，在你的v-for="..." 之后添加一个键，比如v-for="item in transactions" :key="item"
:key 是 v-for 的强制键
data 是一个工厂，它应该返回一个函数

标签： javascript vue.js

【解决方案1】：

在 Vue 中，您必须在应用 v-for 时提供密钥

HTML

<div id="app">
  <div class="container">
    <table class="table">
      <thead class="t-head-light">
        <tr>
            <th>Description</th>
            <th>Year 1</th>
            <th>Year 2</th>
            <th>Year 3</th>
            <th>Year 4</th>
            <th>Year 5</th>
        </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in transactions" :key="i">
        <td>{{item.account_category}}</td>
      </tr>
    </tbody>
    </table>
  </div>
</div>

VueJs

methods:{
    fetchTransactions: function(){
      var url = 'http://127.0.0.1:8000/scenarios/transactions'
      fetch(url)
        .then((resp) => resp.json())
        .then(function(data){
        this.transactions = data;
      })
    }
  }

【讨论】：