文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使v-开关在竞技场中成为强制性的？

问如何使v-开关在竞技场中成为强制性的？
EN

Stack Overflow用户

提问于 2019-12-13 16:25:21

回答 2查看 516关注 0票数 0

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

javascript

vue.js

vuetify.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-12-13 16:53:41

我会使用观察者，如果没有一个开关是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事件放在data中--我认为它们更好地放在方法中。

编辑

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

票数 3

Stack Overflow用户

发布于 2019-12-13 17:13:14

这可能不完全回答这个问题，但它是一个选项，用于验证一段交换机，并在没有开关处于活动状态时包含错误消息。

这是通过拥有一个开关值数组( switches )来实现的，它跟踪每个交换机的状态。

在计算的属性noneSelected中，我们可以根据整体的真实性过滤数组的值。当滤波阵列的长度为0 (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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59326387

复制

相似问题

问如何使v-开关在竞技场中成为强制性的？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使v-开关在竞技场中成为强制性的？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使v-开关在竞技场中成为强制性的？
EN