[Vuejs]-Vuetify Table – Filter out specific row

by

1👍

Is it possible to add a v-if in the same line as v-for?

Yes ! And as you mentioned, it is actually a good way of solving your problem !

<tr v-for="item in item.details" :key="item.id" v-if="item.attribute_name != 'Label batch'">
....
</tr>

Another good way of doing this is by using pre-computed (documentation here) values where you remove your value

It works like this :

computed: {
   itemsWithoutLabelBatch(){
      return this.item.details.filter(item => item.attribute_name !== 'Label batch')
   }
}

And in the template

<tr v-for="item in itemsWithoutLabelBatch" :key="item.id">
....
</tr>
👤RenaudC5

1👍

Official Vue Doc :

It’s not recommended to use v-if and v-for on the same element due to
implicit precedence. Refer to style guide for details.

What I recommend is to put the v-if in a template tag so you don’t have to repeat your condition several times (and it’s still simple)

<tbody>
   <tr v-for="item in item.details" :key="item.id">
      <template v-if="item.attribute_name != 'Label batch'">
         <td>
            <v-chip class="ma-2" color="blue" label outlined>
               {{ item.attribute_name }}
            </v-chip>
         </td>
         <td>
            <v-chip class="ma-2" color="blue" label outlined>
               {{ item.operator }}
            </v-chip>
         </td>
         <td>
            <v-chip class="ma-2" color="blue" label outlined>
               {{ item.value }}
            </v-chip>
         </td>
      </template>
   </tr>
</tbody>
👤Florent Bouisset

1👍

Instead of adding business logic in the HTML template. You can simply achieve that by using Array.filter() method in your script.

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      item: {
        details: [
          {
            id: 1,
            attribute_name: 'Label batch',
            operator: '+',
            value: '66649'
          },
          {
            id: 2,
            attribute_name: 'Style Name',
            operator: '=',
            value: '222'
          }
        ],
      }
    }
  },
  mounted() {
    this.item.details = this.item.details.filter((obj) => obj.attribute_name !== 'Label batch')
  }
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-simple-table class="condition-table">
    <template v-slot:default>
        <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Operator</th>
                <th class="text-left">Value</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in item.details" :key="item.id">
                <td>
                    <v-chip class="ma-2" color="blue" label outlined>
                        {{ item.attribute_name }}
                    </v-chip>
                </td>
                <td>
                    <v-chip class="ma-2" color="blue" label outlined>
                        {{ item.operator }}
                    </v-chip>
                </td>
                <td>
                    <v-chip class="ma-2" color="blue" label outlined>
                        {{ item.value }}
                    </v-chip>
                </td>
            </tr>
        </tbody>
    </template>
</v-simple-table>
  </v-app>
</div>
👤Debug Diva

Leave a comment