我正在努力开发一个简单的组件并在循环中使用它：
2
792<template id="measurement">
<tr class="d-flex">
</tr>
</template>
Vue.component('measurement', {
template: '#measurement',
props: {
name: String,
data: Object,
val: String,
},
});
这显然还不能正常工作，但已经失败了：
<table v-for="(m, idx) in sortedMeters">
<measurement v-bind:data="m"></measurement>
</table>
给出 ReferenceError：在视图中找不到变量：m。由于一个奇怪的原因，同样的事情在段落中起作用，即没有错误：
<p v-for="(m, idx) in sortedMeters">
<measurement v-bind:data="m"></measurement>
</p>
什么原因导致变量找不到？
PS：这是一个小提琴：https://jsfiddle.net/andig2/u47gh3w1/。一旦包含 table 就会显示不同的错误。
更新 循环的目的是生成多个表。每个表的行数将由多个 measurement 创建
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果更换
与
您最终将得到工作代码。
但是您很可能想使用
或
TLDR： 在 Vue 传递 DOM 模板之前，浏览器会将
<measurement v-bind:name="i" v-bind:data="m">提升到之外<table>（在v-for上下文之外），导致 Vue 中出现错误。这是 DOM 模板解析的已知警告.HTML 规范要求
<table>包含仅特定子元素：<script>或 与上面混合同样，
的<a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element" rel="nofollow noreferrer">内容模型<tr>是：<script>或 与上面混合兼容浏览器的 DOM 解析器会自动将不允许的元素（例如
<measurement>）提升到表之外。这发生在脚本阶段之前（甚至在 Vue 看到它之前）。例如，这个标记：
...在 DOM 解析之后（在任何脚本编写之前）变成这样：
请注意
i和m是如何位于v-for循环的上下文之外的，这会导致有关i和m未定义的 Vue 运行时错误（除非您的组件碰巧已经声明了它们）。m的目的是绑定到<measurement>的data属性，但由于失败，data只是其初始值（也是undefined），导致{{data.value}}的渲染失败。 cphpcn渲染错误：“类型错误：无法读取未定义的属性‘值’”。要演示没有这些运行时错误且没有 Vue 的提升，请运行下面的代码片段：