未在渲染時檢查 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=""屬性。 伙計們，如果您的廣播組沒有按預期運行，請確保每個組都有一個唯一的名稱！