javascript - 渲染时未检查 Vuejs 共享 radio 组件

Question

我有一个 vue 组件，它使用额外的标记和样式扩展 native radio 输入，目的是它可以在整个应用程序中用作常规 radio 的替代品:

<div class="radios">
  <radio-input name="radioInput" value="one" v-model="options.firstOption">
  <radio-input name="radioInput" value="two" v-model="options.firstOption">
  <radio-input name="radioInput" value="three" v-model="options.firstOption">
</div>

我一直在遵循建议的方法 here (jsfiddle here ) 但我想为组件添加接受 v-model 属性的能力，而这个例子没有这样做。

到目前为止，这是我的 .vue 组件文件:

<template>
  <span class="radio-control">
    <input
      class="input-bool"
      type="radio"
      :name="name"
      :value="value"
      v-model="radioButtonValue">
  </span>
</template>

<script>
  export default {
    model: {
      prop: 'checked',
    },
    props: {
      name: String,
      value: String,
      checked: String
    },
    computed: {
      radioButtonValue: {
        get: function() {
          return this.checked;
        },
        set: function() {
          this.$emit('input', this.value);
        }
      }
    },
  };
</script>

一切都很好，在变化、模型更新方面效果很好。问题在于组件呈现时未应用 radio 的 checked 属性，因此如果有人点击页面，所有 radio 都显示为空白，直到发生更改事件。

Vue 的文档 explicitly state “v-model 将忽略在任何表单元素上找到的初始值、已检查或已选择的属性。它将始终将 Vue 实例数据视为真实来源。”正如预期的那样，添加它并没有什么不同。但是我很难让 native checked 属性在渲染时出现单选按钮。

Answer 1

根本不是 vue.js 问题，@bertEvans 是正确的，因为我发布的代码可以正常工作。问题是我在页面的更上方有一组单独的 radio 输入，它们具有相同的 name="" 属性。伙计们，如果您的广播组没有按预期运行，请确保每个组都有一个唯一的名称!