时间戳

首页 > 解决方案 > 如何在 vuetify 中强制使用 v-switch？

javascript - 如何在 vuetify 中强制使用 v-switch？

问题描述

我有三个v-switch价值观。它们每个都绑定到switch1属性。

当我点击v-switch是删除/添加值到switch1.

v-switch强制性的怎么办？意味着它不可能取消选中所有。必须至少选择一个。

我认为某些事件，例如 switch1 是否为空数组，然后取消开关单击。

我尝试通过更改事件来做到这一点，但我e以布尔值而不是事件的形式出现。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      switch1: ['val1', 'val2', 'val3'],
      change: (e) => { console.log({ e })}
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.14/dist/vuetify.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.14/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container class="px-0" fluid>
      {{ switch1 }}
      <v-switch
        v-model="switch1"
        label="val1"
        value="val1"
        @change="change($event)"
      ></v-switch>
      <v-switch
        v-model="switch1"
        label="val2"
        value="val2"
        @change="change($event)"
      ></v-switch>
      <v-switch
        v-model="switch1"
        label="val3"
        value="val3"
        @change="change($event)"
      ></v-switch>
    </v-container>
  </v-app>
</div>

标签： javascriptvue.jsvuetify.js

解决方案

我会使用watcher，如果没有一个开关是true，那么将第一个开关设置为 true。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      switch1: ['val1', 'val2', 'val3'],
    }
  },
  methods: {
    change: (e) => {
      /*console.log({
        e
      })*/
    }
  },
  watch: {
    switch1(newVal, oldVal) {
      if (newVal.length) {
        this.switch1 = newVal
      } else {
        setTimeout(() => this.switch1 = oldVal)
      }
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.14/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.14/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container class="px-0" fluid>
      {{ switch1 }}
      <v-switch v-model="switch1" label="val1" value="val1" @change="change($event)"></v-switch>
      <v-switch v-model="switch1" label="val2" value="val2" @change="change($event)"></v-switch>
      <v-switch v-model="switch1" label="val3" value="val3" @change="change($event)"></v-switch>
    </v-container>
  </v-app>
</div>

另一件事是我不会将@change事件放在数据中- 我认为它们最好放在方法中。

编辑

我更新了代码片段以提供更通用的解决方案。感谢setTimeout(() => this.switch1 = oldVal)@JonSud 的评论！

推荐阅读