我試圖將 Vue 組件模板中的類屬性系結到模型的值，該值應該是 true/false 布爾型別。當我的視圖首次創建時，它會根據布林值正確獲取類。但是當我單擊復選框時，它似乎將模型的值重寫為字串而不是布林值，并且類系結將錯誤模型的監視值讀取為字串并假設它是 True。為了防止它，我在模型的更新回呼中進行了轉換，但我認為它看起來不太好，將來可能會混淆。我可以在 b-form-checkbox 中設定布林值以實作所需的行為，而無需直接在回呼中轉換值嗎？
<div class="card mb-3"
v-bind:class="[coin.watch ? 'address-card' : 'address-card-inactive']"
>
...
<b-form-checkbox
v-model="coin.watch"
value=true
unchecked-value=false
switch
@change="updateWatchState(coin)"
>
Active
</b-form-checkbox>
</div>
只有當布林值直接位于下面時，上面的代碼才能正常作業：
methods: {
updateWatchState: function(coin) {
let dataRoute = '/api/balance/' this.a1 '/update';
axios
.get(dataRoute, {
params : {
'contract_address': coin.address,
'name': coin.name,
'watch': coin.watch
}})
.then((response) => {
coin.watch = coin.watch == 'true'? true : false;
console.log('updateWatchState', coin.watch);
});
},
我想以這種方式解決的另一個原因是 coin.watch 更新兩次，我認為這可能是其重繪延遲的原因。
uj5u.com熱心網友回復：
value=true不是有效的 HTML（盡管出于某種原因 Vue 編譯得很好并且表現得像案例 2。）value="true"- 不使用時v-bind，右側始終被視為字串（因為 HTML 中的屬性值始終是字串）v-bind:value="true"-v-bind將內部的所有內容都""視為 JavaScript 運算式 -true在這種情況下為布林值
最后一種情況是你想要的，但因為它是默認值，可以安全地洗掉valueunchecked-value
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473109.html