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

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());
}

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

Answer 2

blade 和 vue js 使用相同的语法在 DOM 中运行 html。我们必须初始化 vue 和刀片。当像这样在 DOM 上加载 vue 输出时，你已经使用了@{{ }}

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