javascript - 如何使用 Vue JS 遍历数组的值？

Question

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

如果我发送获取请求以显示所有椅子 api。我返回时显示如下:

我正在使用 VueJS 2 将值解析为 html View 。

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)

如何获取颜色值并根据记录总数进行迭代？感谢您的帮助。

Answer 1

由于 laravel blade 模板引擎也使用花括号，你必须使用 @ 来转义它，就像这样 @{{ color }}。这样 blade 就会忽略它，不会尝试在 vuejs 之前进行评估。这不仅适用于 blade/vuejs 的情况，也适用于 blade/angular。阅读"Blade & JavaScript Frameworks"文档部分。