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.
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;
})
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.