Question

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <radio v-model="eventTypeInput" id="et-internal" name="event_type" 
  :selectedValue="0">internal</radio>
  <radio v-model="eventTypeInput" id="et-external" name="event_type" 
  :selectedValue="1">external</radio>
   {{eventTypeInput}}
</div>

的JavaScript

new Vue({
  el: '#app',
  components: {
    radio: {
      template: `<div class="control-item">
        <input type="radio" autocomplete="off" ref="input"
          v-model="model"
          :value="selectedValue"
          :id="id"
          :name="name"
          :disabled="disabled">
        <label :for="id"><slot></slot></label>
      </div>`,
   name: 'input-radio',
   props: {
     disabled: {type: Boolean, default: false},
     name: {type: String, default: null},
     selectedValue: {default: true}, // this radio value
     value: {default: false}, // v-model variable
     id: {required: true}
   },
   computed: {
       model: {
         get () {
           return this.value
       },

       set (val) {
         this.$emit('input', val)
        }
      }
    }
   }
  },
    data () {
     return {
        eventTypeInput: 'initial value'
    }
  }
});

我制作了一个与v-model配合使用的无线电输入组件。

当我点击无线电元素时，通过v-model绑定的表达式不会改变。

我做错了什么？这是Vuejs的错误吗？

Answer 1

问题是HTML属性不区分大小写，如果在每个实例中使用selectedValue（例如）更改selected_value，它都可以。

Answer 2

传递selected-value属性时使用selectedValue。

<radio v-model="eventTypeInput" id="et-internal" name="event_type" :selected-value="0">internal</radio>

当在camelCase中定义属性时，需要在kebab-case中传递它们。这在文档中描述为here。

HTML属性不区分大小写，因此在使用非字符串模板时，camelCased道具名称需要使用其kebab-case（连字符分隔）等效项

更新了fiddle。

Vuejs 2输入无线电的v模型无法正常工作

2 个答案: