使用 p 标签的嵌套 v-for 循环在 Vue.js 中不起作用

Posted 2023-02-16

【中文标题】使用 p 标签的嵌套 v-for 循环在 Vue.js 中不起作用

【英文标题】：Nested v-for loops using p tag doesn't work in Vue.js

【发布时间】：2021-01-08 11:42:42

【问题描述】：

我想嵌套 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'
      ]
    ]
  

根据此代码 sn-p 它应该可以工作。我错过了什么？ https://www.codegrepper.com/code-examples/javascript/vuejs+nested+v-for

【问题讨论】：

html 中不允许嵌套 p 标签 - ***.com/questions/12015804/…

【参考方案1】：

当我将外部 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>

【讨论】：

是的，确实如此，它可以工作。有谁知道这是为什么？这是 vue 的 bug 还是设计选择？

我认为p不接受其他元素作为子元素

【参考方案2】：

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 来检查自己

顺便说一句，当某些事情没有按预期工作时，您应该始终检查您的浏览器开发工具控制台以获取类似这样的有用消息...

【讨论】：

啊，谢谢。现在我知道为什么会这样了。实际上首先抛出错误“条目未定义但在渲染期间引用”，但我不明白。随着代码的一些更改，错误消失了，但仍然没有呈现。