Javascript for循环Vue中的绑定元素工作不正常

在下面的Vue组件中，我想通过

dwarfs

数组进行循环。只要我在当前组件中，一切都很好（

TEST

），并且以下所有属性都是正确的

Currenct\u Component.vue:
Stamm:{{tribeName}}
{{dwarf}}

{{dwarf.name}


Alter:{{dwarf.age}
武装部队：

名称：{{wearm.Name}}| Magischer Wert:{{{wearm.magicValue}}


功率因数：{{矮人.武器.地图（武器=>武器.魔法值）.减少（（累加器，当前值）=>累加器+当前值）}

+ 瓦夫
祖鲁克
从“/NewWeaponModal.vue”导入模式；
导出默认值{
数据（）{
返回{
showModal：错，
}
},
组件：{appModal:Modal}，
道具：['tribeName'，'dwarfs'，]，
方法：{
onClick（）{
此.$emit（'backBtn'））
},
notifyApp（）{
this.showModal=false；
这.$emit（‘武器添加’）；
}
},
}

但是，当我将元素

dwarf

绑定到子组件

时，它将更改为数组

dwarf

中的下一个

dwarf

（

测试

）-（因此，当我以模态形式添加新武器时，它将添加到第二个dwarf…：

Child_Component.vue:
&时代；
纽瓦夫
{{targetDwarf}}

贝斯特ätigen酒店
导出默认值{
数据（）{
返回{
武器名称：''，
magicValue:“”，
}
},
道具：['showModal'，'targetDwarf']，
方法：{
onClick（）{
如果（这是武器名称！=''&&
数字.isInteger（+this.magicValue））{
让newData={…this.dwarf}；
新数据[“武器”]=[
…这个，矮人[武器]，
{
“名字”：这个武器的名字，
“magicValue”：Number.parseInt（this.magicValue）
},
];
这是.$http.post（“https://localhost:5019/api“，新数据）
.then（data=>data.text（））
.then（text=>console.log（text））
.catch（err=>console.log（err））；
这.$emit（‘武器添加’）；
}否则{
警报（'您应有效填写所有字段'）
}
},
}
}

看起来您在

v-for=“dwarf in dwarfs”

循环中有

组件，但是用于显示该循环创建的所有模态组件的控件仅在一个变量中：

showmodel

。所以当

showmodel

为

true

时，模态将显示每个矮人，我猜第二个矮人的模态只是掩盖了第一个矮人的模态

要解决这个问题，您可以将

移动到

v-for

循环之外，这样页面上只有一个实例，然后作为显示模态的逻辑的一部分，使用正确的矮人信息填充模态的道具

大概是这样的：

{{dwarf}}

瓦夫

导出默认值{
//....
数据：（）=>({
modalDwarfId:null，
)},
方法：{
setModalDwarf（矮人）{
this.modalDwarfId=drawf.id；
},
onDwarfWeaponAdd（）{
//...
}
},
}

---

然后，您可以从作为道具传递的ID中获取模态中正确的dwarf数据，或者将更细粒度的数据传递给模态，使其更“哑”，这是更好的做法，这样组件就不会依赖于特定的数据结构。希望这有助于

感谢@Joe Dalton的回答，我的情况有点不同：

...
+ 瓦夫

从“/NewWeaponModal.vue”导入模式；
导出默认值{
数据（）{
返回{
showModal：错，
currentDwarf:null，
}
},
组件：{appModal:Modal}，
道具：['tribeName'，'dwarfs'，]，
方法：{
setModalDwarf（矮人）{
this.currentDwarf=矮人；
this.showModal=true；
},
...
}

非常感谢！你说的“掩盖”是对的，两个模态都在彼此之上。因为我的非常小的web api中没有任何

dwarfId

，所以我对你的答案做了一些修改。@Mori真棒！很高兴它起到了作用。而且这种方法看起来很适合数据的性质