我試圖讓一個復選框取消選中另一個（有點像單選按鈕）。我是一個 Vue 菜鳥，所以我不確定我做錯了什么。這是兩個輸入。
<label for="'product-' product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="checkbox"
:id="'product-' product.id"
:value="false"
v-model="selected"/>
<div class="v-center">None</div>
</label>
<label :for="'product-' product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<div class="checkbox-container">
<input class=""
type="checkbox"
:value="true"
:id="'product-' product.id"
v-model="selected"/>
</div>
記錄問題
uj5u.com熱心網友回復：
您可以使用單選按鈕而不是復選框：
new Vue({
el: "#demo",
data() {
return {
product: {id: 1},
selected: false
}
}
}).addon_selected {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<label for="'product-' product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="radio"
:id="'product-' product.id"
:value="false"
v-model="selected"/>
</label>
<label :for="'product-' product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<input class=""
type="radio"
:value="true"
:id="'product-' product.id"
v-model="selected"/>
</label>
</div>uj5u.com熱心網友回復：
你可以試試這個。
<label for="'product-' product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="radio"
:id="'product-' product.id"
:value="checkStatus"
@change="check($event.target.value)"/>
<div class="v-center">None</div>
</label>
<label :for="'product-' product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<div class="checkbox-container">
<input class=""
type="radio"
:value="checkStatus"
:id="'product-' product.id"
@change="check($event.target.value)/>
</div>
在您的組件腳本中，您可以在方法內部定義方法 check()。
<script>
export default {
data() {
return {
checkStatus: false
}
},
methods: {
check: function(val) {
this.checkStatus = !val;
}
},
}
</script>
uj5u.com熱心網友回復：
如果您絕對需要使用復選框而不是單選輸入，您可以反轉一個輸入的true-value和false-value道具。這樣，它將模仿單選按鈕的行為。
new Vue({
el: "#app",
data: {
selected: false
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label for="first_input"
>False</label>
<input
type="checkbox"
id="first_input"
v-model="selected"
:true-value="false"
:false-value="true"/>
<label for="second_input"
>True</label>
<input
type="checkbox"
id="second_input"
v-model="selected" />
<br/>
Input value: {{ selected }}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460474.html
下一篇：如何更好地近似粗貝塞爾曲線？