Display data in Vue.js with v-for

Question

I'm making a simple shopping cart system using Laravel and Vue.js. I can successfully add items to my shopping basket and retrieve them to a certain point, but I'm having trouble actually outputting the items to the view.

When I hit my basket route, I load the basket view which triggers the following Vue code:

new Vue({
  el: '#basket',
  ready: function () {
    this.fetchBasket();
  },
  methods: {
    fetchBasket: function(){
      this.$http.get('api/buy/fetchBasket', function (basketItems) {
        this.$set('basketItems', basketItems);
      });
    }
  }
});

This works and I get data returned in the console:

{027c91341fd5cf4d2579b49c4b6a90da: 
{id: 1, name: "A Gnarly Tree", price: 15, quantity: 2}}
  027c91341fd5cf4d2579b49c4b6a90da:
  {id: 1, name: "A Gnarly Tree", price: 15, quantity: 2}
    id:1
    name:"A Gnarly Tree"
    price:15
    quantity:2

However, nothing appears in the view itself. I'm trying to use v-for to populate a table:

<tbody>
    <tr v-for="item in basketItems">
        <td>@{{ item.name }}</td>
        <td>@{{ item.price }}</td>
        <td>@{{ item.quantity }}</td>
        <td>@<button class="btn btn-primary">Update</button></td>
    </tr>
</tbody>

What am I doing wrong?

@gurghet tells Blade (laravel templating engine) to ignore it, otherwise it will treat it as a PHP echo, basically. — flurpleplurple
– flurpleplurple, Commented Jul 13, 2016 at 13:26

gurghet · Accepted Answer · 2016-07-13 13:50:31Z

1

You didn't initialize the basketItems in the data of your vue instance. Try to add:

...
el: '#basket',
data: { basketItems: [] }, // <-- this line
ready: function(){
  this.fetchBasket();
},
...

Also edit

this.$set('basketItems', basketItems);

to

Vue.set(this, 'basketItems', basketItems)

edited Jul 13, 2016 at 13:50

answered Jul 13, 2016 at 13:24

gurghet

7,6865 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

flurpleplurple Over a year ago

No luck I'm afraid

gurghet Over a year ago

Don't use this.$set is deprecated, I edited my answer

gurghet Over a year ago

Works here: jsfiddle.net/gurghet/dL2m248z/1 what does the basketItems variable contain? are you sure you don't need to display basketItems.data instead?

flurpleplurple Over a year ago

It must be some problem with the way the data is returned from the controller. As you can see from the question, the actual data is contained in a collection or something with a weird random string.

gurghet Over a year ago

Well, you can't expect Vue to magically guess a random string. You should access it with something like: Object.keys(basketItems.something)[0]. You should update your question with the content of that basketItems variable

Collectives™ on Stack Overflow

Display data in Vue.js with v-for

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related