带有 v-model 和 v-bind="$attrs" 的单选按钮上的值的 Vue JS 道具错误

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

我从子组件调用中完全删除了 v-model（这是冲突的）；

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

然后我更新了您更改的方法以包括设置位置变量

methods: {
  changed(e) {
    console.log("Change handler says...");
    console.log(e);
    this.location = e;
  }
}

更新：链接到更新的CodeSandbox

Answer 2

编辑

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

查看更新的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 绑定属性。我通过为 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