3

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

我的组件是:

<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 绑定的任何属性),然后更新该属性(为真或假)当复选框被选中时。

任何人都可以给我任何建议吗?

谢谢你。

4

3 回答 3

9

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

于 2019-03-01T04:06:40.360 回答
4
于 2019-03-01T02:25:03.633 回答
1

不要改变道具。你的组件,有v-model,应该在 change 上发出输入事件。父级将处理值的实际更改。

于 2019-03-01T00:58:12.380 回答