Javascript（Vue.js）-将表行添加到DOM中的错误节点

我正在尝试为第五版《地下城与龙》创建一个主动跟踪程序。使用Vue中包含的fetch函数，我已经能够从游戏中获得所有免费可用怪物的列表，并将它们呈现到无序列表中。我已经向列表中的每个项目添加了一个

onclick

事件，这样当单击一个名称时，怪物对象的一个新实例在被附加到

initiativeOrder

变量后会自动添加到初始表中，但我注意到一些异常行为

首先，单击列表中的一个名称会导致新表行出现在与DOM相关的表之外。其次，如果您多次单击同一名称，它不会在表中添加具有相同信息的另一行，这正是我所期望的

如何更改标记和脚本，以便每次单击列表中的项目时，新项目总是出现在表中的适当位置

最后一年项目|第五版地下城与龙的战斗跟踪器


开始相遇




倡议
名称
生命点
护甲等级

Vue.component(
"生物名单",，
{
道具：[
“生物”
],
模板：'
{index}}{{bioter.name}}
'
}
);
Vue组件(
"战士",，
{
道具：[
“战斗人员”
],
模板：`
?
{{combatant.name}
{{combatant.hit_points}}
{{combatant.armor_class}
`
}
)
var app=新的Vue({
el:“#应用程序”，
数据：{
生物：[]，
初始订单：[]
},
方法：{
添加生物：功能（索引）{
this.initiativeOrder.push（this.biods[index]）；
}
},
已创建：函数（）{
//这在安装组件时运行
fetch（“biates.json”）
.then（data=>data.json（））
.然后（生物=>{this.bioses=bioses}）
}
});

您的问题是自定义

tr

组件。表只需要

tbody

，

thead

，

tr

，

td

，

th

元素，所以其他元素而不是预期的元素不属于表。您必须将整个桌子放在组件中

此问题与任何虚拟节点框架（如angular）有关，而不仅仅与vue有关

例如：

newvue({
数据：{
行：[“第1行”、“第2行”]
},
组成部分：{
myrows：{
道具：[“行”]，
模板：“{row}}”，
},
我的表格：{
道具：[“行”]，
模板：'TEST{{row}}'，
}
}
}).$mount（'div'）

试验

您的问题是自定义

tr

组件。表只需要

tbody

，

thead

，

tr

，

td

，

th

元素，所以其他元素而不是预期的元素不属于表。您必须将整个桌子放在组件中

此问题与任何虚拟节点框架（如angular）有关，而不仅仅与vue有关

例如：

newvue({
数据：{
行：[“第1行”、“第2行”]
},
组成部分：{
myrows：{
道具：[“行”]，
模板：“{row}}”，
},
我的表格：{
道具：[“行”]，
模板：'TEST{{row}}'，
}
}
}).$mount（'div'）

试验

你应该有一个

：键

给你

v-for

，也许可以添加

v-for=（战斗员，我）…：key=“i”

我已将HTML中的

组件实例更改为这样：

HTML

，但这会使情况变得更糟。行仍然显示在错误的位置，并且没有显示任何信息。您应该有一个

：键
为您
v-for
，可能添加
v-for=（战斗员，i）…：key=“i”
我已将HTML中的
组件实例更改为这样：
HTML
，但这会使情况变得更糟。行仍然显示在错误的位置，并且它们不显示任何信息。“表只需要tbody、thead、tr、td、th元素，所以其他元素而不是预期的元素不属于表”。你的意思是说我不能在
index.html
文件中添加一个常规表，然后使用自定义标记来填充行吗？此外，我还尝试将此解决方案插入到自己的代码中，但效果并不理想。它试图演示什么？表格只在您看到的情况下起作用，
。
将不起作用使用您的数据更新答案谢谢您的澄清。这应该对我构建应用程序有很大帮助。“表只需要tbody、thead、tr、td、th元素，所以其他元素而不是预期的元素不属于表”。你的意思是说我不能在
index.html
文件中添加一个常规表，然后使用自定义标记来填充行吗？此外，我还尝试将此解决方案插入到自己的代码中，但效果并不理想。它试图演示什么？表格只在您看到的情况下起作用，
。
将不起作用使用您的数据更新答案谢谢您的澄清。这对我在b方面应该有很大帮助