vue在一个ul中循环两个数组

Question

如何在一个ul中循环两个数组？例如，像v-for="frag1 in fragM; frag2 in fragP这样的代码显然不适用于

data:{
damage:null,
fragP:[],
fragM:[]
},
methods{
suuu(){
//damage is any number
this.fragP.push(this.damage)
//damage is any number but different
this.fragM.push(this.damage)
}
}

<ul v-for="frag2 in fragM" v-for="frag1 in fragP"> <!––thoes two loops not working but i want something like this––>
<li style="background:green">{{frag1}}</li>
<li style="background:red;">{{frag2}}</li>
</ul>

Answer 1

您可以制作computed property:

computed: {
something: function () {
return this.fragM.concat(this.fragP);
}
}

并在模板中使用：

<ul v-for="frag in something"...

Answer 2

如果两个数组的大小始终相同(或者其中一个确实更小(，请使用索引。例如：

<ul v-for="(frag, index) in fragM" :key="index"> 
// (keep in mind that this creates a ul for every set of 2, probably not desired)
<li>{{ fragM[index] }}</li>
<li>{{ fragP[index] }}</li>
</ul>

一旦你很好地工作了，把它转换成一个方法，健全性检查你的数组大小，避免未定义的结果。