将 v-switch 设置为打开，值为：'false'（使用 v-model 反转值）

Question

我有一个v-switch，我希望它是“on/true”，这样开关就在右边，但 v-model 的值仍然是“false”，然后当开关是"off/false" 的 v-model 值为 "true"，本质上是反转值。

我正在努力寻找这个选项或如何做到这一点。我正在使用 Vuetify 1.5.15：

<v-switch color="success" prepend-icon="notifications_off" v-model="url.muteNotifications" @click.capture.prevent.stop="togglePolling(url, urlNo)"></v-switch>

Answer 1

它没有价值 - 它的 input-value

new Vue({
  el: '#app',
  data(){
    return {
      t:false
    }
  },
  methods: {
    change(){
      console.log("change");
      this.t=!this.t;
    }
  },
  vuetify: new Vuetify(),
})

<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <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>
  <v-content>
    <v-switch :input-value="!t" @change="change">Hello world</v-switch>
  </v-content>
</v-app>
</div>

但您也可以将false 定义为 truish

new Vue({
  el: '#app',
  data(){
    return {
      t:false
    }
  },
  vuetify: new Vuetify(),
})

<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <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>
  <v-content>
    <v-switch v-model="t" :false-value="true" :true-value="false">Hello world</v-switch>
  </v-content>
</v-app>
</div>

但这打破了colors - imo a bug

Answer 2

在value 和change 上分解model 并反转算法，如下所示：

<v-switch :value="!mute" @change="(v) => mute = !v" :label="`Switch mute: ${mute.toString()}`"></v-switch>

v-model & 反转

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-switch v-model="mute" :label="`Switch mute: ${mute.toString()}`"></v-switch>
      <v-switch :value="!mute" @change="(v) => mute = !v" :label="`Switch mute reversed: ${mute.toString()}`"></v-switch>
    </v-container>
  </v-app>
</div>
<script>
new Vue({
  el: '#app',
  data () {
    return {
      mute: true
    }
  } 
})
</script>

对于数组

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <div v-for="(sound, index) in sounds" :key="index">
      <v-switch v-model="sound.mute" :label="`Switch mute of ${sound.name}: ${sound.mute.toString()}`"></v-switch>
      <v-switch :value="!sound.mute" @change="(v) => sound.mute = !v" :label="`Switch mute of ${sound.name} reversed: ${sound.mute.toString()}`"></v-switch>
      </div>
    </v-container>
  </v-app>
</div>
new Vue({
  el: '#app',
  data () {
    return {
      sounds: [{name:'first', mute: true}, {name:'second', mute: true}]
    }
  } 
})

现场示例：https://codepen.io/andriykuba/pen/abomQYe

Answer 3

Vuetify 默认值为真/假

 <v-switch
  v-model="sales.final_info.reverse_charge"
 ></v-switch>

通过 false-value 和 true-value 属性设置的 Vuetify 自定义开关值

 <v-switch         
 false-value="NO"
 true-value="YES"
 v-model="sales.final_info.reverse_charge">
</v-switch>