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>代碼問題是即使切換關閉，狀態也始終顯示為“已啟用”。但我需要顯示一條單獨的訊息，因為當切換開關處于關閉位置時，狀態應為“禁用”。
我看到這可以通過 v-if 和 v-else 來實作。但不確定如何進行
uj5u.com熱心網友回復：
在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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/332925.html
標籤：javascript Vue.js