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" ></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 
                                 
                                :
                            >
                                {{device.traffic}}
                            </span>
                        </td>
                        <td>
                            <span  :>{{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?

CodePudding user response：

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>

CodePudding user response：

you can use v-if and v-for just don't do it in the same tag. use v-if before or inside v-for

e.g.

<div v-for="i in 10">
   <div v-if="i>
     ...
    </div> 
</div>

CodePudding user response：

Vue not support using v-if inline with v-for. You can create a parent v-for and child is v-if

Something like this

<template v-for="..." :key="...">
   <div|tr|anytag v-if="...">
   </div|tr|anytag>
</template>