VueJS - Скрывать и показывать на основе выбора формы

#vue.js #show-hide #v-for #v-model

Вопрос:

У меня есть элемент выбора формы и массив для отображения некоторой информации об устройстве на странице. Я визуализирую все устройства с помощью цикла v-for и не смог найти способ их отображения на основе form-select элемента «Выбор из», потому что мне не разрешено использовать v-if операторы с v-for

Вот моя форма выбора;

 lt;b-form-select v-model="selected" :options="options" size="sm" class="mr-10px"gt;lt;/b-form-selectgt;

И вот как я отображаю устройства в HTML;

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

А теперь вот мой файл 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-для. Есть ли какой-нибудь другой способ сделать это?

Ответ №1:

Использовать computed свойство,

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

затем используйте computedDevices v-for вместо devices

 lt;tr v-for="device in computedDevices" :key="device.id" gt;  ... lt;/trgt;

1. Это работает, но как мне это сделать для всех параметров в форме выбрать? Активный, деактивированный, местоположение, трафик и т.д… Таким образом, только активные показывают, что даже v-модель выбора формы равна «Всем» или чему-то другому. Я хочу, чтобы он был динамичным и основывался на значении v-модели form-select

Ответ №2:

вы можете использовать v-если и v-для, просто не делайте этого в одном теге. используйте v-если до или внутри v-для

напр.

 lt;div v-for="i in 10"gt;  lt;div v-if="igt;  ...  lt;/divgt;  lt;/divgt;

Ответ №3:

Vue не поддерживает использование v-if встроенного с v-for . Вы можете создать родителя v-for , а дочерний v-if

Что-то вроде этого

 lt;template v-for="..." :key="..."gt;  lt;div|tr|anytag v-if="..."gt;  lt;/div|tr|anytaggt; lt;/templategt;