바인드 데이터 값에 대한 값 전환

Question

나는 켜기/끄기를 전환하는 vue 스위치를 사용하고 있는데 어떤 상태인지 알고 싶습니다. https://www.npmjs.com/package/vue-switch의 설명서에 따르면 나는 다음을 사용해야합니다 : value.sync = " toggle "이라는 데이터 속성을 사용하여 스위치 구성 요소에서 '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

당신 '나는 다음과 같은 오류를 받고 있어요 사실 패키지에 두 개의 구성 요소가 있음을 주목하십시오. 하나는 vue 1 *이고 다른 하나는 vue 2 *입니다. 올바른 것을 가져와야합니다.

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