时间戳

首页 > 解决方案 > 如果数组中的值匹配，则Vue绑定类

vue.js - 如果数组中的值匹配，则Vue绑定类

问题描述

我正在显示表格数组，如果表格存在现有票证，我会打印票证号：

<div class="table-empty" v-for="table in tables" :key="table.id">
  {{table.name}}
  <div v-for="ticket in tickets" :key="ticket.id">
    <p  v-if="ticket.table_id === table.id">{{ticket.number}}</p>
  </div>
<div>

如果该表有票，我想用“表满”类替换。我想不出一个解决方案，因为触发类的值在子 div 中，而类必须应用于父 div。

标签： vue.js

解决方案

您可以在父 div 中添加一个函数

在这里找到工作的 codepen：https ://codepen.io/chansv/pen/ExxgJBO

<div :class="emptyOrFull(table.id)" v-for="table in tables" :key="table.id">
  {{table.name}}
  <div v-for="ticket in tickets" :key="ticket.id">
    <p  v-if="ticket.table_id === table.id">{{ticket.number}}</p>
  </div>
<div>

为脚本添加了一个方法

methods: {
    emptyOrFull(id) {
      if (this.tickets.map(x => x.table_id).includes(id)) return "table-empty";
      else return "table-full"
    }

推荐阅读