CODEWITHSUNDEEP
vue.js
catmal
catmal

Reputation: 1758

Vue bind class if values in array match

I am showing array of tables, and if there is an existing ticket for the table I print the ticket number:

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

I want to replace with class "table-full" if there is a ticket for that table. I can't think of a solution as the value that triggers the class is in the child div while the class has to be applied to the parent div.

Upvotes: 1

Views: 243

Answers (1)

chans
chans

Reputation: 5260

You can add a function in the parent div

Find working codepen here: 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>

Added a method to script

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

Upvotes: 1

Related Questions