如何使用VueJS迭代数组的值？

Question

我正在使用Laravel 5.3进行开发。我也在使用分形。我也将axios作为Http Client来执行Ajax请求。

如果我发送获取请求以显示所有椅子api。我将通过以下显示返回：

我正在使用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());
}

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

<div id="app">  
    <ul>
        <li v-for="chair in chairs">{{ color }}</li>
    </ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>
<script src="js/app-vue.js"></script>

当我在浏览器中访问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)

如何访问颜色值并根据记录总数进行迭代？任何帮助表示赞赏。

Answer 1

由于laravel刀片模板引擎也使用花括号，您必须使用@将其转义，例如@{{ color }}。这种方式刀片只是忽略它，并没有尝试在vuejs之前评估。这不仅适用于刀片/ vuejs情况，而且适用于例如刀片/角度。阅读文档中的"Blade & JavaScript Frameworks"部分。

Answer 2

刀片和刀片vue js使用相同的语法在DOM中运行html。我们必须初始化哪个是vue＆amp;刀。你在DOM上加载vue输出时使用@{{ }}

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