编辑

Question

我有三个带有值的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/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>

Answer 1

我将使用 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！

Answer 2

这可能无法完全回答问题，但是是一个选项，它可以验证一部分开关并在没有激活的开关时合并错误消息。

这是通过使用一组开关值switches来跟踪每个开关的状态来实现的。

在计算属性noneSelected中，我们可以基于整体真实性来过滤数组的值。当过滤后的数组的长度为零（0）时，我们将通过针对计算值的v-if显示错误消息。

Vue.config.productionTip = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      switches: [false, false, false]
    }
  },
  computed: {
    noneSelected() {
      return this.switches.filter(x => !!x).length === 0;
    }
  },
  methods: {
    change: (e) => { console.log('event', 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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container class="px-0" fluid>
      {{ switches }}
      <p v-if="noneSelected" style="color: red">At least one switch needs to be active.</p>
      <v-switch
        v-model="switches[0]"
        label="val1"
        @change="change($event)"
      ></v-switch>
      <v-switch
        v-model="switches[1]"
        label="val2"
        @change="change($event)"
      ></v-switch>
      <v-switch
        v-model="switches[2]"
        label="val3"
        @change="change($event)"
      ></v-switch>
    </v-container>
  </v-app>
</div>

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

2 个答案:

编辑