javascript - 使用 v-model 和 v-bind 的单选按钮上的值的 Vue JS Prop 错误 ="$attrs"

Question

我遇到了一些我无法理解的奇怪行为。

我有一个简单的单选按钮组件，用作实际单选按钮的“包装器”。

在这个组件上，我有 inheritAttrs: false 并在元素本身上使用 v-bind="$attrs" 这样我就可以使用 v-model 和 value 等.

但是，在选择一个单选按钮后，会抛出一个错误，指出 prop 值无效(因为它是一个事件而不是一个字符串)，有趣的是我注意到在初始渲染时，Vue Devtools 中的 value prop 是空白的。

我只是想让这些单选按钮使用所选单选按钮的字符串值更新父级的 location 数据对象值。

我不知道我到底哪里错了。非常感谢任何帮助。

问题示例项目: https://codesandbox.io/embed/m40y6y10mx

FormMain.vue

<template>
  <div>
    <p>Location: {{ location }}</p>
    <form-radio
      id="location-chicago"
      v-model="location"
      value="Chicago"
      name="location"
      label="Chicago"
      @change="changed"
    />
    <form-radio
      id="location-london"
      v-model="location"
      value="London"
      name="location"
      label="London"
      @change="changed"
    />
  </div>
</template>

<script>
import FormRadio from "./FormRadio.vue";

export default {
  name: "FormMain",
  components: {
    FormRadio
  },
  data() {
    return {
      location: ""
    };
  },
  methods: {
    changed(e) {
      console.log("Change handler says...");
      console.log(e);
    }
  }
};
</script>

FormRadio.vue

<template>
  <div>
    <label :for="id">
      {{ label }}
      <input
        :id="id"
        type="radio"
        :value="value"
        v-on="listeners"
        v-bind="$attrs"
      >
    </label>
  </div>
</template>

<script>
export default {
  name: "FormRadio",
  inheritAttrs: false,
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        change: event => {
          console.log("Change event says...");
          console.log(event.target.value);
          this.$emit("change", event.target.value);
        }
      };
    }
  }
};
</script>

Answer 1

编辑

找到 this简洁的文章，描述了组件的 model 属性。基本上，它允许您自定义 v-model 的工作方式。使用它，FormMain.vue 将不必更改。只需从 FormRadio 中删除 value prop 并添加具有您自己定义的模型属性

查看更新 codepen :

FormRadio 脚本

<script>
export default {
  name: "FormRadio",
  inheritAttrs: false,
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  },
  // customize the event/prop pair accepted by v-model
  model: {
    prop: "radioModel",
    event: "radio-select"
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        change: event => {
          console.log("Change event says...");
          console.log(event.target.value);
          // emit the custom event to update the v-model value
          this.$emit("radio-select", event.target.value);
          // the change event that the parent was listening for
          this.$emit("change", event.target.value);
        }
      };
    }
  }
};
</script>

---

编辑前:

如果存在 v-model，Vue 似乎会忽略 value 绑定(bind)属性。我通过为 radio-value 之类的值使用自定义属性来解决这个问题。

FormMain.vue

<form-radio
  id="location-chicago"
  v-model="location"
  radio-value="Chicago"
  name="location"
  label="Chicago"
  @change="changed"
/>
<form-radio
  id="location-london"
  v-model="location"
  radio-value="London"
  name="location"
  label="London"
  @change="changed"
/>

input 事件处理程序将更新 v-model。

FormRadio.vue

<template>
  <div>
    <label :for="(id) ? `field-${id}` : false">
      {{ label }}
      <input
        :id="`field-${id}`"
        type="radio"
        :value="radioValue"
        v-on="listeners"
        v-bind="$attrs"
      >
    </label>
  </div>
</template>

<script>
export default {
  name: "FormRadio",
  inheritAttrs: false,
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    radioValue: {
      type: String,
      required: true
    }
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: event => {
          console.log("input event says...");
          console.log(event.target.value);
          this.$emit("input", event.target.value);
        },
        change: event => {
          console.log("Change event says...");
          console.log(event.target.value);
          this.$emit("change", event.target.value);
        }
      };
    }
  }
};
</script>

参见 forked codepen