Laravel 5.3、Vue.js 2+ 无法让列表渲染（v-for）工作
[英]Laravel 5.3, Vue.js 2+ can't get List Rendering (v-for) working
问题描述
public/js/symp.js（初始帖子）
new Vue({
el :'#symp',
data :{
tease: 'test',
items: [
{ message: 'Foo', subject: 'A' },
{ message: 'Bar', subject: 'B' }
]
}
});
资源/视图/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潘俊杰的建议更新:-)]
资源/视图/dash.blade.php
@extends('layouts.app')
@section('content')
<div id="symp">
</div>
@endsection
资源/视图/布局/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>
公共/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>
3 个解决方案
解决方案1
1 2016-11-28 03:21:41
解决方案2
1 2016-12-31 20:31:05
这在 Vue 1.x 中运行良好，但在 Vue 2 中，您需要将模板包裹在div标签周围：
资源/视图/布局/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上查看问题
解决方案3
0 已采纳 2016-11-28 09:12:12
Egad，这是一场迟钝的野鹅追逐。
1) 小心在元素周围放置额外的 div 以隔离它们。 请注意，tease 现在有一个专用的 div 围绕它，并且 item... v-for 有一个不同的专用 div 围绕它。 没有那个 Vue 2+ 会感到困惑并且不会玩球。
<template id="symp-temp">
<div>
<div>tease: <span>@{{ tease }}</span></div>
<div v-for="item in items">
sub: <span>@{{ item.subject }}</span>
msg: <span>@{{ item.message }}</span>
</div>
</div>
</template>
2）由于某种原因 this.$set(...) 我猜它已被弃用（或需要我不知道的额外范围）。 尽管在 Vue 2+ 世界中使用带有完整参数的 Vue.set 似乎是可行的。
Vue.set(this, 'items', response.data.data.data);
我可能会找到更多的小精灵，但看起来我现在没有被困住:-)
有关更多上下文，这是我尝试启用的更多代码。 我正在做相当多的自定义布局实验，因此在我们的更多数据模式稳定下来之前避免使用组件。
new Vue({
el :'#symp',
name: 'symp',
template: '#symp-temp',
data :{
tease: 'well',
items: [
{ message: 'Foo', subject: 'A' },
{ message: 'Bar2', subject: 'B' }
],
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
}
},
mounted: function() {
this.getVueItems(this.pagination.current_page);
},
methods: {
getVueItems: function(page) {
/* URL /make is a Laravel resource that pulls rows from a database,
/* returns them in json list, which the Vue.set transfers to the template :-) */
this.$http.get('/make?page='+page).then((response) => {
Vue.set(this, 'items', response.data.data.data);
});
}
}
});
vue.js我在'v-for'语句中使用'v-once'，为什么找不到'item'？
[英]vue.js i used 'v-once' in 'v-for' statement,why can't find 'item'?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.