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

【问题标题】：VueJS - Hide and Show based on form selectionVueJS - 基于表单选择的隐藏和显示
【发布时间】：2021-12-26 12:22:28
【问题描述】：

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

这是我的表单选择；

<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 文件...

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',
        };
    },
};

这是我的问题；当表单选择更改为Active 或Deactive 时如何显示这些设备

我不能说v-if something equals to 'Active'，因为 Vue 不允许我将 v-if 与 v-for 一起使用。有没有其他方法可以做到这一点？

【问题讨论】：

标签： vue.js show-hide v-for v-model

【解决方案1】：

使用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>

【讨论】：

它正在工作，但我如何为表单选择中的所有选项执行此操作？活动、非活动、位置、交通等...这样，只有活动的才显示，甚至表单选择的 v-model 等于“全部”或其他内容。我希望它是动态的并且基于表单选择的 v-model 值

【解决方案2】：

你可以使用 v-if 和 v-for 只是不要在同一个标签中使用。在 v-for 之前或内部使用 v-if

例如

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

【讨论】：

【解决方案3】：

Vue 不支持将v-if 与v-for 内联使用。你可以创建一个父v-for，子是v-if

类似的东西

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

【讨论】：

当我这样做时，它说模板 v-for 不能被键入...
@YasinDemirkaya 你确定吗？