Utilizing the vue-switch component to toggle on and off, I needed to determine its current state. Following guidance from the documentation at https://www.npmjs.com/package/vue-switch, I implemented :value.sync="toggle" in the switch component along with a data property called 'toggle'. However, an error message has surfaced:
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
The HTML snippet:
<switcher size="lg" color="green" :value.sync="toggle"></switcher>
JS implementation:
<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>
Content of switch.vue file:
<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>