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

Question

我有三個帶值的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>

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事件放在data 中- 我認為它們最好放在methods 中。

編輯

我更新了代碼片段以提供更通用的解決方案。 感謝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>