Vuejs共享无线电组件未在渲染上检查

Question

我有一个vue组件,通过额外的标记和样式扩展了本机无线电输入,目的是它可以在整个应用程序中用作常规无线电的替身:

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

我一直在遵循这里建议的方法(这里是jsfiddle ),但我想添加组件接受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>

一切都很好,在变化方面很有效,模型更新.问题是当组件呈现时未应用无线电的已检查属性,因此如果有人点击该页面,则所有无线电显示为空白,直到发生更改事件.

Vue的文档明确声明 " v-model将忽略在任何表单元素上找到的初始值,已检查或选定的属性.它将始终将Vue实例数据视为事实的来源." 正如预期的那样,添加它并没有什么不同.但我很难让原生checked属性在渲染时出现单选按钮.

Answer 1

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