Vue.Js，將值綁定到組件中的復選框

Question

我正在制作一個組件，它是一個復選框的包裝器（我對“文本”和“數字”類型的輸入做了類似的處理），但我無法正確綁定傳入的值。

我的組件是：

<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 綁定的任何屬性），然后更新該屬性（為真或假）當復選框被選中時。

任何人都可以給我任何建議嗎？

謝謝你。

Answer 1

你不應該$emit event.target.value ，它是復選框的值，它不是布爾值。 如果你想檢測復選框是否更新（是真還是假），你應該$emit event.target.checked就像 fstep 說的那樣。

Answer 2

如果 v-on 是唯一將使用的偵聽器，則使用v-model可能更容易，如Vue 輸入文檔中的復選框示例中所示。

但是，您可以使用基於Binding-Native-Events-to-Components文檔的偵聽器

<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>

Answer 3

不要改變道具。 您的組件具有v-model ，應該在 change 上發出輸入事件。 父級將處理值的實際更改。