Question

我正在尝试建立一个表，其中行是项（第一个v-for），列是位置（第二个v-for），单元格是item_locations（第三个v-for）。

如果在某个位置存在该项目（因此有item_location对象），我要打印是，否则我要打印否。

<div v-for="item in items" :key="item.id>
 {{item.name}}
  <div v-for="location in locations" :key="location.id">
    <div v-for="item_location in location.item_locations" :key="item_location.id">
    </div>
  </div>
</div>

通过在第三个循环中添加它：

<p v-if="item_location.item_id == item.id">Yes</p>

我正确地为存在item_location的项目/位置组合打印是。

我不能做的是仅对不存在item_location对象的项目/位置组合打印No。为了进一步说明，item_locations是一个联接表。

Answer 1

对于您的询问有些困惑，但是我要提出这个建议

您的嵌套v-for必须使用从其父级声明的属性，像这样

<div class="table-cell" v-for="location in locations" :key="location.id">
      <div v-for="item_location in location.item_locations" :key="item_location.id">
            <div v-if="item_location.location_id == location.id ">Yes</div>
            <div v-else>No</div>
      </div>
</div>

因此嵌套的v-for将是location.item_locations，如果仅检查一个条件，则可以执行v-else。

Answer 2

我这样解决了：

<div v-for="item in items" :key="item.id>
 {{item.name}}
  <div v-for="location in locations" :key="location.id">
    <div>{{filterLocation(item, location)}}</div>
  </div>
</div>



filterLocation: function(item, location) {
  let value = item.item_locations.filter(item_location => {
  return item_location.location_id == location.id;
   });
   var that = this;
   that.item_location_exists = value.length;
},

在模板中，我可以做一个条件，因为item_location_exists等于0或1。

Vue在嵌套v-中检查是否不存在记录

2 个答案: