Vue JS V-for 不渲染

Question

Apologies for the beginner question. I'm a beginner to Vue and have been struggling to understand why my v-for is not rendering any data. I can see the array in the Vue console in data , but, the table does not render.

See below for my code:

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

Just want to know what I'm doing wrong.

---

EDIT:

Thanks for the responses, my transactions data looks like this:

I will look into computed transactions too.

EDIT 2: Thanks for the response, I figured out that it was the curly braces I used in the HTML. Since I'm using Django as the back-end, it got confused between jinja and vue I think. I've since changed Vue's default delimiter to square brackets and it now works.

Answer 1

In Vue, it is mandatory that you give a key while applying 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;
      })
    }
  }