データへのVueスイッチの値のバインド

Question

私はvue-switchを使用してオンとオフを切り替えるので、どの状態にあるのかを知る必要があります。https://www.npmjs.com/package/vue-switchのドキュメントによると、ちょうどvalue.sync = "トグル "と呼ばれるデータプロパティでスイッチコンポーネント内の" toggle "を実行します。

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 

私のHTML：：

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

マイ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> 

switch.vueコード：

<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

あなた」私は、次のエラーを取得しています実際にパッケージには2つのコンポーネントがあります。 1つはvue 1 *、もう1つはvue 2 *。正しいものをインポートするだけです。

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