在 Vue 中,如何根据条件取消复选框?
In Vue, how to cancel a checkbox based on a condition?
我想始终至少选中一个复选框,但我混合了 v-model
和 :checked
的概念。
doc 说:
v-model
will ignore the initial value
, checked
or selected
attributes
found on any form elements. It will always treat the Vue instance data
as the source of truth.
我可以阻止我的模型被修改,但我无法阻止复选框被选中...
一些代码:
模板
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
<label :for="id">{{ s.display }}</label>
</div>
模特userOutputSeries
data () {
return {
userOutputSeries: {
foo: {
display: 'Awesome Foo',
active: true
},
bar: {
display: 'My Bar',
active: false
}
}
}
}
preventIfLessThanOneChecked
处理程序
preventIfLessThanOneChecked (event) {
// I don't update the model so it stay at the same state
// But only need to count the active series and do what we want.
console.log(event.target.value, event.target.checked)
}
有什么想法可以阻止本机复选框传播吗?
尝试在您选中的单个复选框上使用 disabled
:
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id"
:disabled="(s.active && numberOfChecked == 1) ? disabled : null"
@change="preventIfLessThanOneChecked" :checked="s.active">
<label :for="id">{{ s.display }}</label>
</div>
您应该使用 v-model
而不是 :checked
,这样对 userOutputSeries
数据 属性 的更改将反映在复选框输入中。
然后,将 v-for
中的 s
引用传递给该方法,如果没有 active
复选框:
new Vue({
el: '#app',
data() {
return {
userOutputSeries: {
foo: {
display: 'Awesome Foo',
active: true
},
bar: {
display: 'My Bar',
active: false
}
}
}
},
methods: {
preventIfLessThanOneChecked(item) {
if (item.active) {
return;
}
let items = Object.values(this.userOutputSeries);
if (!items.find(i => i.active)) {
item.active = true;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked(s)" v-model="s.active">
<label :for="id">{{ s.display }}</label>
</div>
</div>
在@thanksd 给出的上述答案中,我的复选框未选中。
所以我正在写我的解决方案。
这是我的循环语句,根据你的文件更改变量名。
v-for="column in tableColumns"
这是我的输入(如果 visible 为真,则复选框被选中)
<input type="checkbox" v-model="column.visible" @change="event => visibleColumnsChanged(column, event)">
然后在我的更改方法中
- 如果没有留下可见项目,请将 column.visible 设置为 true
- 使用 event.target.checked = true 再次选中复选框。
visibleColumnsChanged: function(column, event){
if (column.visible) {
return;
}
if(! this.tableColumns.find(c => c.visible)){
column.visible = true;
event.target.checked = true;
}
}
我想始终至少选中一个复选框,但我混合了 v-model
和 :checked
的概念。
doc 说:
v-model
will ignore the initialvalue
,checked
orselected
attributes found on any form elements. It will always treat the Vue instance data as the source of truth.
我可以阻止我的模型被修改,但我无法阻止复选框被选中...
一些代码:
模板
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
<label :for="id">{{ s.display }}</label>
</div>
模特userOutputSeries
data () {
return {
userOutputSeries: {
foo: {
display: 'Awesome Foo',
active: true
},
bar: {
display: 'My Bar',
active: false
}
}
}
}
preventIfLessThanOneChecked
处理程序
preventIfLessThanOneChecked (event) {
// I don't update the model so it stay at the same state
// But only need to count the active series and do what we want.
console.log(event.target.value, event.target.checked)
}
有什么想法可以阻止本机复选框传播吗?
尝试在您选中的单个复选框上使用 disabled
:
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id"
:disabled="(s.active && numberOfChecked == 1) ? disabled : null"
@change="preventIfLessThanOneChecked" :checked="s.active">
<label :for="id">{{ s.display }}</label>
</div>
您应该使用 v-model
而不是 :checked
,这样对 userOutputSeries
数据 属性 的更改将反映在复选框输入中。
然后,将 v-for
中的 s
引用传递给该方法,如果没有 active
复选框:
new Vue({
el: '#app',
data() {
return {
userOutputSeries: {
foo: {
display: 'Awesome Foo',
active: true
},
bar: {
display: 'My Bar',
active: false
}
}
}
},
methods: {
preventIfLessThanOneChecked(item) {
if (item.active) {
return;
}
let items = Object.values(this.userOutputSeries);
if (!items.find(i => i.active)) {
item.active = true;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
<input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked(s)" v-model="s.active">
<label :for="id">{{ s.display }}</label>
</div>
</div>
在@thanksd 给出的上述答案中,我的复选框未选中。 所以我正在写我的解决方案。
这是我的循环语句,根据你的文件更改变量名。
v-for="column in tableColumns"
这是我的输入(如果 visible 为真,则复选框被选中)
<input type="checkbox" v-model="column.visible" @change="event => visibleColumnsChanged(column, event)">
然后在我的更改方法中 - 如果没有留下可见项目,请将 column.visible 设置为 true - 使用 event.target.checked = true 再次选中复选框。
visibleColumnsChanged: function(column, event){
if (column.visible) {
return;
}
if(! this.tableColumns.find(c => c.visible)){
column.visible = true;
event.target.checked = true;
}
}