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

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

当我单击v-switch时，将删除/添加值到switch1。

v-switch强制性怎么做？这意味着无法取消所有选择。必须至少选择一个。

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

我尝试通过change事件来做到这一点，但我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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

最佳答案

我将使用观察程序，如果所有开关都不为真，则将第一个设置为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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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！