<div id="example-1">
<ul>
<input type="text" v-model="searchString" placeholder="Filter" />
<p>sortKey = {{sortKey}}</p>
<li v-for="item in sortedItems">
<input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="checked" /> {{ item.price }} - {{ item.name }}
</li>
</ul>
<div class="cecont" v-if="!checked">
<p>text content</p>
</div>
</div>Codepen 鏈接：- https://codepen.io/dhanunjayt/pen/oNGXjZL
使用 codepen 中的上述代碼，我可以執行任務，例如單擊復選框時應該隱藏內容。我在哪里能夠實作它。但問題是，單擊一個復選框后，我可以選擇多個復選框。
那么解決這個問題，我需要在輸入中添加 id 屬性嗎？？
或更改我的 v-model 屬性，如果我將我的 v-model 更改為 checked.name 功能不起作用。
如何解決這個問題？
uj5u.com熱心網友回復：
您應該將checked屬性設定為單個專案
您正在創建多個復選框，所有復選框都具有相同v-model的checked. 如果選中任何一個復選框，則所有復選框將一起選中。
解決方案。
您應該為回圈中的每個專案設定 checked 屬性。這將使v-model作業獨立。
var example1 = new Vue({
el: '#example-1',
data: {
// sort: item,
sortKey: 'name',
checked: false,
searchString: "",
items: [
{ price: '1', name: 'mm', checked: false },
{ price: '22', name: 'aa', checked: false },
{ price: '55', name: 'dd', checked: false },
{ price: '77', name: 'gg', checked: false },
{ price: '123', name: 'kk', checked: false },
{ price: '53', name: 'mn', checked: false },
]
},
computed: {
checkedLength() {
return checkedLength = this.items.filter(item => item.checked === true).length;
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="example-1">
<ul>
<input type="text" v-model="searchString" placeholder="Filter" />
<p>sortKey = {{sortKey}}</p>
<li v-for="item in items">
<input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" /> {{ item.price }} - {{ item.name }}
</li>
</ul>
<p> checkedLength {{checkedLength}}</p>
<div class="cecont" v-if="checkedLength > 0">
<p>text content</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371630.html
標籤：javascript Vue.js