vue.jsのデータをv-forと表示

Question

私はLaravelとVue.jsを使って簡単なショッピングカートシステムを作っています。私は買い物カゴにアイテムを追加して特定のポイントにそれらを取得することができますが、実際にアイテムをビューに出力するのに問題があります。

私は私のバスケットルートを打つとき、私は以下のVueのコードをトリガバスケットビューをロード：

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

これは動作し、私はコンソールに返されたデータを取得する：

{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 

しかし、ビュー自体には何も表示されません。私は、テーブルを埋めるためにv-forを使用しようとしている：私は間違って

<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> 

何をしているのですか？

Answer 1

vueインスタンスのデータにbasketItemを初期化していません。追加しよう：

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

また口ひげの前に@が何をするん

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