Vue.Js，将值绑定到组件中的复选框

Posted 2023-02-23

【中文标题】Vue.Js，将值绑定到组件中的复选框

【英文标题】：Vue.Js, binding a value to a checkbox in a component

【发布时间】：2019-07-22 23:11:45

【问题描述】：

我正在制作一个组件，它是一个复选框的包装器（我对“文本”和“数字”类型的输入做了类似的处理），但我无法正确绑定传入的值。

我的组件是：

<template>
  <div class="field">
    <label :for="name" class="label">
       label 
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error"> error </li>
      </ul>
    </p>
  </div>
</template>
<script>
export default 
  name: 'check-edit',
  props: 
    value: 
      type: Boolean,
      default: false
    ,
    label: 
      type: String,
      default: ''
    ,
    name: 
      type: String,
      default: ''
    ,
    errors: 
      type: Array,
      default: () => []
    
  ,
  mounted () 
  ,
  computed: 
    listeners () 
      return 
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit('input', event.target.value)
      
    ,
    hasErrors () 
      return this.errors.length > 0
    
  ,

</script>

我已经在全球范围内导入了它；并通过以下方式在另一个视图中调用它：

<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>

我的模型在数据中，属性 ShowInCalendar 是布尔值，在我的测试用例中为真。因此，当我查看该页面时，该框被选中。在 Firefox 中使用 Vue 工具我可以看到 model.ShowInCalendar 为 true，并且该框被选中。但是，当我单击它时，该框仍处于选中状态，并且 ShowInCalendar 的值更改为“on”，此后更改不会更改 ShowInCalendar 的值。

我在这里找到了这个示例：https://jsfiddle.net/robertkern/oovb8ym7/ 并尝试为其实现本地数据属性，但结果不起作用。

我想要做的关键是让复选框的初始检查状态为 ShowInCalendar 的状态（或通过组件上的 v-model 绑定的任何属性），然后更新该属性（为真或 false) 当复选框被选中时。

谁能给我一些建议吗？

谢谢。

【参考方案1】：

你不应该$emit event.target.value，这是复选框的值，不是布尔值。如果你想检测复选框是否更新（是真还是假），你应该像fstep所说的那样$emit event.target.checked。

【讨论】：

谢谢，我不明白您指定了返回的属性。

【参考方案2】：

如果 v-on 是唯一将使用的侦听器，则使用 v-model 可能更容易，如 Vue input docs 中的复选框示例。

但是你可以使用基于Binding-Native-Events-to-Components docs 的监听器

<template>
  <div class="field">
    <label :for="name" class="label">
       label 
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error"> error </li>
      </ul>
    </p>
  </div>
</template>
<script>
export default 
    name: 'check-edit',
    props: 
        value: 
            type: Boolean,
            default: false
        ,
        label: 
            type: String,
            default: ''
        ,
        name: 
            type: String,
            default: ''
        ,
        errors: 
            type: Array,
            default: () => []
        
    ,
    mounted() ,
    computed: 
        listeners() 
            var vm = this;
            // `Object.assign` merges objects together to form a new object
            return Object.assign(
                ,
                // We add all the listeners from the parent
                this.$listeners,
                // Then we can add custom listeners or override the
                // behavior of some listeners.
                
                    // This ensures that the component works with v-model
                    input: function(event) 
                        vm.$emit('input', event.target.checked);
                    
                
            );
        ,
        hasErrors() 
            return this.errors.length > 0;
        
    
;
</script>

【讨论】：

谢谢，我明白你的意思了。

【参考方案3】：

不要改变道具。您的组件具有v-model，应该是emitting input events on change。父级将处理值的实际更改。

【讨论】：

好的，有道理。我确实有一个在道具上使用 get 和 set 的版本，看起来更笨重，并返回相同的结果。