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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (196)

我正在创建一个组件,它是一个复选框的包装器(我已经完成类似'text'和'number'类型的输入)但是我无法将传入的值正确绑定。

我的组件是:

<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绑定),然后将该属性更新(为true或false)选中复选框时

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券