public/js/symp.js(初始帖子)
new Vue({
el :'#symp',
data :{
tease: 'test',
items: [
{ message: 'Foo', subject: 'A' },
{ message: 'Bar', subject: 'B' }
]
}
});
resources/views/dash.blade.php(初始帖子)
<html>
<body>
@extends('layouts.app') [ this includes symp.js and calls @yeild('content') ]
@section('content')
<div id="symp">
<div>
<span>subject</span>
<span>message</span>
</div>
tease: <span>@{{ tease }}</span>
<div v-for="item in items">
sub: <span>@{{ item.subject }}</span>
msg: <span>@{{ item.message }}</span>
</div>
</div>
@endsection
我知道 Laravel 与 {{ }} 打架，因此需要在前面添加 @，但我的理解是上面的演示片段代码应该呈现出挑逗:测试然后两行
子:一条消息:Foo
子:B 消息:酒吧
...唉，我看到了挑逗:主题消息，没有挑逗值，并且根本不存在任何行。
有趣的是，我有一个文件夹作为我正在构建的项目的一部分，其中包含 http://www.hc-kr.com/2016/11/laravel-5-vuejs-crud-with-notification-pagination-laravel.html 的工作版本就位，但是该文件夹强制使用 Vue.js 1.x，所以这似乎是 Laravel 5.3 的 vue.js 2.x 的独特问题？
[根据@PanJunjie潘俊杰建议更新:-)]
资源/views/dash.blade.php
@extends('layouts.app')
@section('content')
<div id="symp">
</div>
@endsection
资源/ View /布局/app.blade.php
<html>
<script src="/js/app.js"></script>
<body>
...
<template id="symp-temp">
tease: <span>@{{ tease }}</span>
<div v-for="item in items">
sub: <span>@{{ item.subject }}</span>
msg: <span>@{{ item.message }}</span>
</div>
</template>
</body>
<script src="/js/symp.js"></script>
</html>
public/js/symp.js
new Vue({
el :'#symp',
name: 'symp', /* unnecessary? */
template: '#symp-temp', /* this helps a bit :-) */
data :{
tease: 'well',
items: [
{ message: 'Foo', subject: 'A' },
{ message: 'Bar', subject: 'B' }
]
}
});
一些进展。现在显示了预告值，但项目行仍然不显示。 JavaScript 控制台报告此...
[Vue warn]: Component template should contain exactly one root element:
tease: <span>{{ tease }}</span>
<div v-for="item in items">
sub: <span>{{ item.subject }}</span>
msg: <span>{{ item.message }}</span>
</div>
最佳答案
这在 Vue 1.x 中工作得很好，但在 vue 2 中你需要将模板包裹在 div 标签上:
资源/ View /布局/app.blade.php
<template id="symp-temp">
<div>
tease: <span>@{{ tease }}</span>
<div v-for="item in items">
sub: <span>@{{ item.subject }}</span>
msg: <span>@{{ item.message }}</span>
</div>
</div>
</template>
您可以在 github 上查看该问题 https://github.com/vuejs/vue-loader/issues/384
关于javascript - Laravel 5.3、Vue.js 2+ 无法使列表渲染 (v-for) 工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40833620/