使用v-if和v-else如何在vjs中显示有效的消息?

Question

toggleEnable(event) {
let shouldEnable = event ? event.target.checked : false
if (typeof event === 'boolean') {
this.isEnabled = event;
}
if (shouldEnable !== this.autoCampaign.enabled) {
this.updateSettings({
enabled: shouldEnable
})
}
},

<div id="switch-wrapper">
<span>enabled</span>
<span class="switch">
<input name="auto_campaign[enabled]" type="hidden" value="0">
<input id="enabled" class="switch-input" type="checkbox" value="1"
name="auto_campaign[enabled]" v-model="isEnabled"
@change="toggleEnable" />
<label class="switch-paddle enable-button" for="enabled"></label>
</span>
</div>

代码的问题是状态总是显示为"enabled"即使开关是关闭的。但我需要显示一个单独的消息作为状态应该是"禁用";当开关处于关闭位置时。

我看到这可以通过v-if和v-else实现。但不确定如何继续

Answer 1

v-if和v-else的实现如下:

请注意v-else必须加在v-if后面，否则v-else不起作用。

你只需要依赖你的v-model值isEnabled。当您更改复选框时，此选项将自动更新。您不需要通过toggleEnable函数单独更新它

new Vue({
el: "#app",
data: {
isEnabled: false
},
methods: {
toggleEnable(event) {
// let shouldEnable = event ? event.target.checked : false
// if (typeof event === 'boolean') {
//     this.isEnabled = event;
// }
// if (shouldEnable !== this.autoCampaign.enabled) {
//     this.updateSettings({
//         enabled: shouldEnable
//     })
// }
},
}
})

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<div id="app">
<div id="switch-wrapper">
<span v-if="isEnabled">enabled</span>
<span v-else>disabled</span>
<span class="switch">
<input name="auto_campaign[enabled]" type="hidden" value="0">
<input id="enabled" class="switch-input" type="checkbox" value="1" name="auto_campaign[enabled]"
v-model="isEnabled" @change="toggleEnable" />
<label class="switch-paddle enable-button" for="enabled"></label>
</span>
</div>
</div>