Bind Vue-Schalter Wert auf Daten Prop

Question

Ich benutze Vue-Schalter, der ein- und ausgeschaltet wird und ich muss wissen, in welchem ​​Zustand es ist. Gemäß der Dokumentation unter https://www.npmjs.com/package/vue-switch soll ich nur verwenden: value.sync = " toggle "in der Switch-Komponente mit einer Dateneigenschaft namens 'toggle', was ich getan habe. Ich erhalte die folgende Fehlermeldung:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" vue switch found in ---> <Switcher> at E:\Dev\BackgroundCheck.Members\front-end\node_modules\vue-switch\switch.vue 

Mein HTML:

<switcher size="lg" color="green" :value.sync="toggle"></switcher> 

Mein JS:

<script> 
import mySwitch from 'vue-switch'; 

export default { 
    name: 'BackgroundReports', 
    components: { 
    'switcher': mySwitch 
    }, 
    computed: { 
    report() { return this.$store.getters.currentReport }, 
    isBeingMonitored() { return this.$store.getters.isBeingMonitored } 
    }, 
    mounted() { 
    this.toggle = this.isBeingMonitored; 
    } 
} 
</script> 

Der switch.vue Code:

<template> 
    <div :class="className" @click="onClick"> 
     <span class="open">{{ openName }}</span> 
     <span class="close">{{ closeName }}</span> 
    </div> 
</template> 

<script> 
'use strict'; 

export default { 
    props: { 
     value: { 
      default: true, 
      twoWay: true 
     }, 
     size: { 
      type: String, 
      default: 'md中' 
     }, 
     // blue red green orange 
     color: { 
      type: String, 
      default: 'red' 
     }, 
     openValue: { 
      default: true 
     }, 
     closeValue: { 
      default: false 
     }, 
     openName: { 
      type: String, 
      default: 'ON' 
     }, 
     closeName: { 
      type: String, 
      default: 'OFF' 
     }, 
     disabled: { 
      type: Boolean, 
      default: false 
     } 
    }, 
    computed: { 
     className() { 
      let { 
       value, 
       openValue, 
       closeValue, 
       size, 
       color, 
       disabled 
      } = this; 
      return { 
       'vue-switch': true, 
       'z-on': value === openValue, 
       'z-disabled': disabled, 
       ['s-' + size]: true, 
       ['c-' + color]: true 
      }; 
     } 
    }, 
    methods: { 
     onClick() { 
      let { 
       disabled, 
       value, 
       openValue, 
       closeValue 
      } = this; 
      if (!disabled) { 
       if (openValue === value) { 
        this.value = closeValue; 
       } else { 
        this.value = openValue; 
       } 
      } 
     } 
    } 
} 

</script> 

Answer 1

Sie‘ Ich werde feststellen, dass es tatsächlich zwei Komponenten im Paket gibt. Eins für vue 1. * und eins für vue 2. *. Sie müssen nur die richtige importieren.

import mySwitch from 'vue-switch/switch-2.vue';