VueJSを使用して配列の値を反復処理する方法は？

Question

私はLaravel 5.3で開発しています。フラクタルも使っています。また、Ajaxリクエストを実行するためのHttp ClientとしてのAxiosもあります。

私は、すべての椅子APIを表示するgetリクエストを送信します。私は以下のディスプレイで返されます：

私はVueJS 2を使ってhtmlビューの値を解析しています。

ChairsController.php

public function index() 
{ 
    $chairs = Chair::paginate(25); 
    // Return a collection of $chair with pagination 
    return $this->response->withPaginator($chairs, new ChairTransformer()); 
} 

APP-vue.js

new Vue({ 
    el: '#app', 
    data: { 
     chairs: [] 
    }, 
    mounted() { 
     axios.get('http://l5.app:8000/api/v1/chairs').then(response => this.chairs = response.data); 
    } 
}); 

getchairs.blade.php

2/2 
ErrorException in c5c35433.php line 72: 
Use of undefined constant color - assumed 'color' (View: /home/vagrant/sites/l5/resources/views/dev/getchairs.blade.php) 

どのようにアクセスカラー値とレコードの合計数に応じて繰り返す：私は、ブラウザでgetchairs.blade.phpアクセスすると、エラーはありますか？どんな助けもありがとうございます。

Answer 1

laravelブレードテンプレートエンジンも中括弧を使用していますので、@（@{{ color }}など）でエスケープする必要があります。この方法では、ブレードはそれを無視してvuejsの前に評価しようとしません。これは、ブレード/ブレードの状況だけでなく、ブレード/角度などにも適用されます。ドキュメントから"Blade & JavaScript Frameworks"セクションを読んでください。

Answer 2

ブレード& vue jsは、DOMでhtmlを実行するのと同じ構文を使用します。私たちは初期化する必要があります。これは、vue &ブレードです。このようにDOMにvue出力をロードするときは@{{ }}を使用してください

<div id="app"> 
    <ul> 
     <li v-for="chair in chairs">@{{ color }}</li> 
    </ul> 
</div>