我正在使用Laravel 5.3进行开发.我也在使用分形.我也将axios作为Http Client来执行Ajax请求.
如果我发送一个获取请求显示所有椅子api.我将通过以下显示返回:
我正在使用VueJS 2将值解析为html视图.
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);
}
});
<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”部分.