[英]VueJS invert value in v-model
Here my code:这是我的代码:
<input
v-model="comb.inactive"
type="checkbox"
@click="setInactive(comb.id_base_product_combination)"
>
I need to apply the invert of the comb.inactive on the v-model.我需要在 v-model 上应用 comb.inactive 的反转。
Here what i tried:这是我尝试过的:
<input
v-model="comb.inactive == 1 ? 0 : 1"
type="checkbox"
@click="setInactive(comb.id_base_product_combination)"
>
<input
v-model="comb.inactive == 1 ? false : true"
type="checkbox"
@click="setInactive(comb.id_base_product_combination)"
>
Do you have others ideas?你有其他想法吗?
Consider using true-value
and false-value
as shortcuts:考虑使用
true-value
和false-value
作为快捷方式:
<input
v-model="comb.inactive"
type="checkbox"
:true-value="false"
:false-value="true"
>
Or in this case, where you may be looking for alternating integers, you can just set them directly.或者在这种情况下,您可能正在寻找交替整数,您可以直接设置它们。
<input
v-model="comb.inactive"
type="checkbox"
:true-value="1"
:false-value="0"
>
You should do the following:您应该执行以下操作:
<input
v-model="comb.inactive"
type="checkbox"
@click="setInactive(comb.id_base_product_combination)"
>
mounted(){
this.comb['inactive'] = !(this.comb['inactive']);
}
For better practice, you can use computed
:为了更好地实践,您可以使用
computed
:
<input
v-model="checkedItem"
type="checkbox"
@click="setInactive(comb.id_base_product_combination)"
>
computed: {
checkedItem: {
get: function () {
return !this.comb['inactive'];
},
set: function (newVal) {
console.log("set as you want")
}
}
If you want to invert the v-model, then just make a custom input component!如果你想反转v-model,那么只需制作一个自定义输入组件!
checkbox-inverted
Vue.component('reverse-checkbox', {
props: ['value', 'label'],
template: `
<label>
<input
type="checkbox"
:checked="valueInverse"
@input="onInputChanged"
/>
<span>{{label}}</span>
</label>
`,
computed: {
valueInverse() {
return !this.value;
},
},
methods: {
onInputChanged(e) {
this.$emit('input', this.valueInverse);
},
},
});
Then you can use it with v-model
like any other input component.然后你可以像任何其他输入组件一样将它与
v-model
一起使用。 more information about custom inputs here有关自定义输入的更多信息在这里
<reverse-checkbox
v-model="invertedModel"
label="This checkbox will show the inverted value"
></reverse-checkbox>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.