使用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

顺便说一句，当某些东西无法按预期工作时，您应该始终在浏览器开发工具控制台中检查类似这样的有用消息...