Question

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

使用Vue.js进行V-for循环多维调用

4 个答案: