Level 88
Take a look at the documentation for display data: http://vuejs.org/guide/list.html
Jul 9, 2015
14
Level 4
Why won't vue display my data?
I'm playing with a simple cart system in Laravel, using PHPCart and Vue.js.
When the user hits my basket route, Vue.js gets the basket data:
new Vue({
el: '#basket',
ready: function(){
this.fetchBasket();
},
methods: {
fetchBasket: function(){
this.$http.get('/api/buy/getBasket', function(basketItems){
this.$set('basketItems', basketItems);
});
}
}
});
This grabs the data just fine, as I can see it in the Dev tools:
2: {id: "2", name: "Cremin", price: 35, quantity: "1"}
id: "2"
name: "Cremin"
price: 35
quantity: "1"
3: {id: "3", name: "Torphy", price: 35, quantity: "1"}
id: "3"
name: "Torphy"
price: 35
quantity: "1"
However, when I just try and echo out the data in a v-repeat:
<div id="basket">
<ul v-repeat="basketItems">
<li> name ( in @-prefaced curly brackets which the forum gets rid of, stupidly )</li>
</ul>
</div>
The page just displays 'name' in curly brackets. What am I missing? It's loading the Vue vendor file and script files fine, it's grabbing the data fine, and it should be binding to the basket div. There are no console errors.
Level 4
@bobbybouwmann not seeing anything there's that's helping me, sorry... Did you have a specific part in mind?
Level 46
You need to put the repeat directive in the li tag
Level 4
@topvillas tried that, makes no difference :)
Level 88
Look at the demo
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>
The repeat is in the li tag and not in the ul tag!
Level 4
@bobbybouwmann @topvillas said the same thing - I'd already tried it, it makes no difference.
Level 46
Try putting basketItems in data
Level 4
@topvillas tried that as well, no difference. What's odd is it's outputting the curly brackets as well. If it couldn't find the data, surely it would just return a blank page because no <li> tag would be written in the first place.
I'm using exactly the same idea elsewhere in the site - api call to get data, loop through it in the template with v-repeat - and it works flawlessly.
Level 46
bind(this) on the callback?
Level 4
@topvillas Do what on the what back?
Level 46
this in the callback will have the wrong scope ...
this.$http.get('/api/buy/getBasket', function(basketItems){
this.$set('basketItems', basketItems);
}.bind(this));
Level 4
@topvillas that doesn't do anything. But for some reason, I just changed the id of the div i'm binding and something has changed, because now I get a blank page. If I output the data using $data | json, it gives me:
basketItems: []
i.e. an empty array...
EDIT: ok, weird. In Firefox it gives me an empty array, in Chrome it works. Just changing the id of the binding div. The id didn't conflict with any other Vue instance. Why would it work in Chrome but not FF?
Level 14
TRY this, it worked for me: instead of v-repeat , try v-for---
v-for="basketItem in basketItems"
1 like
Level 5
Since 1.0 we should use v-for as said above.
I think this might help. https://laracasts.com/series/learning-vue-step-by-step/episodes/6
Please or to participate in this conversation.