使用vuejs的V-for循环多维调用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vuejs的V-for循环多维调用相关的知识，希望对你有一定的参考价值。
我想要所有的名称，在此之后，如果父级不为null，则应返回parent.name
所以数据应该是
Zack
Computer - mouse
Computer HDD
Laptop - Ram
我怎么能在这里实现这个是我的代码
<li v-for="(index, item) in inventory">
{{ item.name }}
</li>
<li v-for="par in item.parent"> {{ par.name }} </li>
</ul>
https://jsfiddle.net/L3gshbna/
这应该返回那些父母是空的，然后谁的父母在那里看到我的预期回应谢谢
答案
您应该首先对数组进行排序，以便将Zach作为第一个输出。你可以采取多种方式，其中一种你可以在我更新的小提琴https://jsfiddle.net/doef2u01/1/中看到
var vm = new Vue({
el: '#vue-instance',
data: {
inventory: [
{"id":21,"name":"Mouse","parent_id":3,"parent":{"id":3,"name":"Computer","parent_id":null}},
{"id":1,"name":"Zack","parent_id":null, "parent":null},
{"id":27,"name":"Ram","parent_id":4,"parent":{"id":4,"name":"Laptop","parent_id":null}},
{"id":37,"name":"HDD","parent_id":6, "parent":{"id":6,"name":"Computer","parent_id":null}}
]
},
computed: {
sortedInventory() {
return [
...this.inventory.filter(item => item.parent === null),
...this.inventory.filter(item => item.parent !== null)
]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
<ul>
<li v-for="(index, item) in sortedInventory">
<template v-if="item.parent">
{{item.parent.name}} -
</template>
{{ item.name }}
</li>
</ul>
</div>另一答案
试试这个
<div id="vue-instance">
<ul>
<li v-for="(index, item) in inventory">
{{ item.name }}
</li>
<li v-for="par in inventory"> {{ par.parent.name }} </li>
</ul>
</div>
另一答案
您可以使用v-if和v-else来实现此目的
<div id="vue-instance">
<ul>
<li v-for="(i, value) in inventory">
<template v-if='value.parent'>
{{value.parent.name}} - {{ value.name }}
</template>
<template v-else>
{{ value.name }}
</template>
</li>
</ul>
另一答案
如果我理解你，这将给你结果：
<div id="vue-instance">
<ul>
<li v-for="(index, item) in sorted">
<span v-if="item.parent !== null"> {{ item.parent.name }} - </span> {{ item.name }}
</li>
</ul>
</div>
computed: {
sorted: function() {
return this.inventory.sort(item => {
return item.parent_id !== null;
});
}
}
https://jsfiddle.net/e8z0gbkx/
以上是关于使用vuejs的V-for循环多维调用的主要内容，如果未能解决你的问题，请参考以下文章