VueJS - 基于表单选择的隐藏和显示

Question

我有一个表单 select 元素和一个数组，用于在页面上显示一些设备信息。我用 v-for 循环渲染所有设备，但我找不到一种方法来根据 form-select 元素的 selection 显示它们，因为我不允许使用 v-if v-for

的语句

这是我的表格select;

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

下面是我在 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>

现在这是我的 javascript 表单文件 - select 选项和设备数组...

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,
    },
]

下面是我如何导入 javascript 文件并将其用作我的 .vue 文件中的数据...

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

这是我的问题；当表单-select 更改为 Active 或 Deactive

时如何显示这些设备

我不能说 v-if something equals to 'Active' 因为 Vue 不允许我将 v-if 与 v-for 一起使用。还有其他方法吗？

Answer 1

您可以使用 v-if 和 v-for，但不要在同一个标签中使用。在 v-for

之前或内部使用 v-if

例如

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

Answer 2

Vue 不支持使用 v-if 与 v-for 内联。您可以创建父 v-for 和子 v-if

像这样

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

Answer 3

使用computed属性,

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

然后在 v-for 中使用 computedDevices 而不是 devices

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

VueJS - 基于表单选择的隐藏和显示

VueJS - Hide and Show based on form selection

show-hide

vue.js

v-for

v-model