我有一个自定义的Toggle组件，该组件是在Vue中从头开始制作的。
<template>
<div :class="{Switch: true, disabled: disabled}" @click="toggle" :title="disabled ? disabledtitle : ''">
<div :class="{Background: true, active: isToggled}"></div>
<div :class="{Toggle: true, active: isToggled}"></div>
</div>
</template>
<script>
export default {
name: 'Toggle',
props: {
toggled: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
disabledtitle: {
type: String,
default: ''
}
},
data () {
return {
isToggled: false
}
},
methods: {
toggle () {
if(this.disabled)
return
this.isToggled = !this.isToggled
this.$emit('input', this.isToggled)
}
},
mounted () {
this.isToggled = this.toggled
}
}
</script>
...
它在另一个组件中有多个实例，例如：
<template>
<div v-if="category === 'Basic'" class="Basic">
<Toggle :toggled="config.isToggledThisOption" @input="updateConfig($event, 'isToggledThisOption')" />
</div>
<div v-else-if="category === 'Other'" class="Other">
<Toggle :toggled="config.isToggledOtherOption" @input="updateConfig($event, 'isToggledOtherOption')" />
</div>
</template>
...
还有一个菜单，可在类别之间切换（更改category变量）
这很好用，但是问题是toggled道具在类别之间切换时不会更新。
我设法对其进行了跟踪，问题出在下面：
只要category的值更改，<Toggle />组件就不会更新。它始终保持不变，即使在检查元素中也不会发生更新。仅在重新加载页面后，mounted()也不会再次执行（即使那样，并非所有<Toggle />的{{1}}函数都将执行）。
我是否需要在组件中添加某种ID /标识符，以便重新安装/重新渲染/重新启动它？