I have a table

<v-simple-table >
    <template v-slot:default>
        <thead>
            <tr>
                <th >Name</th>
                <th >Operator</th>
                <th >Value</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in item.details" :key="item.id">
                <td>
                    <v-chip  color="blue" label outlined>
                        {{ item.attribute_name }}
                    </v-chip>
                </td>
                <td>
                    <v-chip  color="blue" label outlined>
                        {{ item.operator }}
                    </v-chip>
                </td>
                <td>
                    <v-chip  color="blue" label outlined>
                        {{ item.value }}
                    </v-chip>
                </td>
            </tr>
        </tbody>
    </template>
</v-simple-table>

I would like to add an if-check and not show label batch.

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

I want to hide if

item.details.attribute_name == 'label batch'

I did this

it works, but I am not sure if this is the best way ...

<v-simple-table >
    <template v-slot:default>
        <thead>
            <tr>
                <th >Name</th>
                <th >Operator</th>
                <th >Value</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in item.details" :key="item.id">
                <td v-if="item.attribute_name != 'Label batch'">
                    <v-chip  color="blue" label outlined>
                        {{ item.attribute_name }}
                    </v-chip>
                </td>
                <td v-if="item.attribute_name != 'Label batch'">
                    <v-chip  color="blue" label outlined>
                        {{ item.operator }}
                    </v-chip>
                </td>
                <td v-if="item.attribute_name != 'Label batch'">
                    <v-chip  color="blue" label outlined>
                        {{ item.value }}
                    </v-chip>
                </td>
            </tr>
        </tbody>
    </template>
</v-simple-table>

How would you guys do that ?

CodePudding user response：

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>

CodePudding user response：

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  color="blue" label outlined>
               {{ item.attribute_name }}
            </v-chip>
         </td>
         <td>
            <v-chip  color="blue" label outlined>
               {{ item.operator }}
            </v-chip>
         </td>
         <td>
            <v-chip  color="blue" label outlined>
               {{ item.value }}
            </v-chip>
         </td>
      </template>
   </tr>
</tbody>