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

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

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

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

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

解决方法:

由于laravel刀片模板引擎也使用花括号,你必须使用@来逃避它,就像@ {{color}}一样.这种方式刀片只是忽略它,并没有尝试在vuejs之前评估.这不仅适用于刀片/ vuejs情况,而且适用于例如刀片/角度.阅读文档中的“Blade & JavaScript Frameworks”部分.