javascript - Vue JS - 将默认值注入(inject)自定义单选组

Question

所以我尝试向我编写的自定义 radio 组件注入(inject)默认值

代码如下:

<template>
<div class="custom-radio-button">
  {{value}}
  <div  v-for= "item in localValue">
    <input type="radio" :value="item.value" name=item.name @click=onSelected(item.value) >
    <span>{{item.label}}</span>
    </input>
    </div>

</div>

<script>
  import Vue from 'vue'

  const name = 'CustomRadioButton'

  export default {
    name,
    componentName: name,

    props: [ 'name', 'value', 'isDefault', 'label'],


    data() {
      return { 
        localName: this.name,
        localValue: this.value
      }
    },
    methods: {
      onSelected (value) {
        this.$emit('clicked', value)
      }
    }
  }
</script>

我是这样调用它的:

<CustomRadioButton :value=RadioFieldData  @clicked="isRadioButtonSelection" isDefault='yellow'></CustomRadioButton>

这是随之而来的 Json 数据

RadioFieldData:[
  {label:'Fire', value:'red', name:'colour' },
  {label:'Sun', value:'yellow', name:'colour',isDefault:'yellow'},
  {label:'Water', value:'blue', name:'colour'}
]

我的问题是将值“yellow”传递给单选按钮组的最佳方法是什么？

Answer 1

您的问题是，在模板中使用 Prop 时，需要以 kebab-case 格式表示。要将 isDefault 设置为“yellow”，您需要使用

is-default="yellow"

参见https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

一旦您能够正确读取该属性，您就可以使用

:checked="item.value == isDefault"

这是一个例子。

Vue.component('custom-radio-button', {
  template: `<div class="custom-radio-button">
  Default: {{isDefault}}
  <div v-for="item in value">
    <input type="radio" :value="item.value" name="item.name" @click="onSelected(item.value)" :checked="item.value == isDefault" />
    <span>{{item.label}}</span>
  </div></div>`,
  props: ['value', 'isDefault'],
  methods: {
    onSelected(value) {
      this.$emit('clicked', value)
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    isRadioButtonSelection (val) {
      console.log('isRadioButtonSelection', val)
    }
  },
  data: {
    RadioFieldData: [{"label":"Fire","value":"red","name":"colour"},{"label":"Sun","value":"yellow","name":"colour","isDefault":"yellow"},{"label":"Water","value":"blue","name":"colour"}]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <custom-radio-button :value="RadioFieldData" 
                       @clicked="isRadioButtonSelection"
                       is-default="yellow">
  </custom-radio-button>
</div>