VueJS - Hide and Show based on form selection

Question

I have a form select element and an array to display some device information on the page. I render all the devices with a v-for loop and I couldn't find a way to display them based on the selection from form-select element because I am not allowed to use v-if statements with v-for

Here is my form select;

<b-form-select v-model="selected" :options="options" size="sm" class="mr-10px"></b-form-select>

And here is how I display the devices in HTML;

                    <tr v-for="device in devices" :key="device.id">
                        <td style="width: 20px;">
                            <img :src="device.image"alt="..." />
                        </td>
                        <td>
                            <h6>{{device.name}}</h6></span>
                            <span>{{device.model}}</span>
                        </td>
                        <td>
                            <span 
                                class="badge font-size-12" 
                                :class="{
                                    'bg-soft-danger': device.traffic >= '10' && device.traffic <= '30',
                                    'bg-soft-warning': device.traffic >= '30' && device.traffic <= '60',
                                    'bg-soft-success': device.traffic > '50',
                                }"
                            >
                                {{device.traffic}}
                            </span>
                        </td>
                        <td>
                            <span class="badge font-size-12" :class="[device.status == 'Active' ? 'bg-soft-success' : 'bg-soft-danger']">{{device.status}}</span>
                        </td>
                    </tr>

And now here is my javascript file for form-select options and device array...

export const devices = [
    {
        id: 1,
        image: require("./mini.svg"),
        name: "Username 1",
        model: "Device Model",
        traffic: "10mb",
        status: "Active",
    },
    {
        id: 2,
        image: require("./mini.svg"),
        name: "Username 2",
        model: "Device Model 2",
        traffic: "20mb",
        status: "Active",
    },
    {
        id: 3,
        image: require("./mini.svg"),
        name: "Username 3",
        model: "Device Model 3",
        traffic: "30mb",
        status: "Deactive",
    },
];

export const options = [
    {
        id: 1,
        value: "All",
        text: "All",
        disabled: false,
    },
    {
        id: 2,
        value: "Location",
        text: "Location",
        disabled: true
    },
    {
        id: 3,
        value: "Traffic",
        text: "Traffic",
        disabled: false,
    },
    {
        id: 4,
        value: "Active",
        text: "Active",
        disabled: false,
    },
    {
        id: 5,
        value: "Deactive",
        text: "Deactive",
        disabled: false,
    },
]

And here is how I import the javascript file and use these as data in my .vue file...

import { devices, options } from '../devices'
export default {
    data() {
        return {
            devices: devices,
            options: options,
            selected: 'All',
        };
    },
};

Here is my question; how do I display these devices when the form-select is changed to Active or Deactive

I cant say v-if something equals to 'Active' because Vue doesn't let me use v-if with v-for. Is there any other way to do this?

Answer 1

Use computed property,

computed: {
  computedDevices() {
    // filter by conditions here
    return this.devices.filter(device => device.status === 'Active')
  }
}

then use computedDevices in the v-for instead of devices

<tr v-for="device in computedDevices" :key="device.id" >
  ...
</tr>