Question

为初学者提出的道歉。我是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;
      })
    }
  }
})

只想知道我在做什么错。

编辑：

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

data output in Vue console

我也会研究computed个交易。

编辑2： 感谢您的答复，我发现这是我在HTML中使用的花括号。由于我使用Django作为后端，因此我认为Jinja和Vue之间混淆了。此后，我将Vue的默认定界符更改为方括号，并且现在可以使用了。

Answer 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;
      })
    }
  }

Vue JS V-不渲染

1 个答案: