使用vuejs的V-for循环多维调用

Question

我想要所有的名称，在此之后，如果父级不为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/

这应该返回那些父母是空的，然后谁的父母在那里看到我的预期回应谢谢

Answer 1

您应该首先对数组进行排序，以便将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>

Answer 2

试试这个

<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>

Answer 3

您可以使用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>

Answer 4

如果我理解你，这将给你结果：

<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/