如何解决使用p标签的嵌套v-for循环在Vue.js中不起作用
我想嵌套2个v-for循环。它应该很简单,但是它不起作用,我也不知道为什么。
当我循环浏览用户并显示他们的姓名时,这很好。当我从会话数组中获取第一个元素并显示其名称时,这也可以正常工作。
但是,当我想在嵌套的v-for循环中遍历会话数组时,该数组似乎为空。为什么会这样?
<p v-for="entry in user">
{{entry.name}} //this is working fine
{{entry.session[0].name}} //this is also working fine,so "session" is an array with elements that have the property "name"
<p v-for="session_entry in entry.session"> //this v-for is not executed,as if entry.session would be empty
{{session_entry.name}}
</p>
</p>
data: {
user: [{
name: 'test2name',session:[
{name:'sessionname'},{name:'sessionname2'}
]
}]
}
根据此代码段,它应该可以工作。我错过了什么? https://www.codegrepper.com/code-examples/javascript/vuejs+nested+v-for
解决方法
当我将外部p
更改为div
时,它的工作原理如下:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',data: {
user: [{
name: 'test2name',session: [{
name: 'sessionname'
},{
name: 'sessionname2'
}
]
}]
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div v-for="entry in user">
{{entry.name}}
<p v-for="session_entry in entry.session">
{{session_entry.name}}
</p>
</div>
</div>
,
Nesting p tags is not allowed in HTML
Vue编译器(处理您的模板)以某种方式知道这一点并将其编译为如下内容:
<p v-for="entry in user">
{{entry.name}}
{{entry.session[0].name}}
</p>
<p v-for="session_entry in entry.session">
{{session_entry.name}}
</p>
...导致错误“输入未定义,但在渲染期间被引用”
您可以通过将模板粘贴到vue-compiler-online中来检查自己,并查看右侧的AST
顺便说一句,当某些东西无法按预期工作时,您应该始终在浏览器开发工具控制台中检查类似这样的有用消息...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。