Vue中如何多次使用radio作为组件？

Question

我在vue中做了一个switch组件。并且此开关组件将选择的数据发送到其 parent 模板，如下所示。

switchform.vue
模板

<div :class = "{ 'switch-field' : !smallSelection,
                 'small-switch-field':smallSelection}"
 v-if='twoSelection'>

    <input type="radio" id="radio-first" name="switch-first" 
    @change="categoryChange"
    :value="options[0]" 
    v-model='selected'
    />
    <label for="radio-first">{{options[0].toUpperCase()}}</label>

    <input type="radio" id="radio-second" name="switch-second" 
    @change="categoryChange"
    :value="options[1]" 
    v-model='selected'
    />
    <label for="radio-second">{{options[1].toUpperCase()}}</label>
</div>

方法

methods:{
    categoryChange(){
        this.$emit("selectedCategory", this.selected);
    }
},

但是，当我在一个视图中两次使用这个组件时，两个不同的按钮 ui 组件传送相同的数据。

parent

<div class='main-body'>
    <div class='ticket-count-analysis'>
        <div class='analysis-title'>
            <div style='flex-grow:1'>Type of tickets</div>
            <div class='hr-line white'></div>
        </div>
        <div>{{currentRatioCategory}}</div>
        <switch-form
        :options='options'
        :smallSelection=false
        @selectedCategory='changeTypeCategory'
        class='option-switch'
        ></switch-form>
    </div>
    <div class='ticket-ratio-analysis'>
        <div class='analysis-title'>
            <div style='flex-grow:1'>Proportion of ticket by type</div>
            <div class='hr-line white'></div>
        </div>
        <div>{{currentTypeCategory}}</div>
        <switch-form
        :options='options'
        :smallSelection=false
        @selectedCategory='changeRatioCategory'
        class='option-switch'
        ></switch-form>

    </div>

</div>

如何让两个不同的''不共享parent中的数据。我想多次使用该组件，并且我希望每次都发出自己的数据，以便我可以使用两个不同的数据。

渲染后，视图如下所示。

左侧将使用来自左侧开关的数据而右侧将使用从右侧开关接收到的数据。

Answer 1

您应该考虑修复这里的多个问题：

删除 ID - 由于您使用了该组件两次，因此您最终会得到相同的 ID 两次。 Id 属性应该是唯一的。
v-model 本质上与 :value 和 @change 的组合相同。这意味着您最好不要使用 :value，@change 可以使用，但不是必需的。我认为在你的情况下，使用 :value 和 @change 会更容易。示例如下。
不要在此处使用名称，因为它会将无线电分组（您最初的问题）。同样，由于您多次使用该组件，名称将被重复。这意味着第二个按钮你产生的将被分组到第一个具有相同名称的。你可以像看id一样看名字。你要么必须为每个组件使用创建一个唯一的名称（作为道具或使用随机字符串）或者干脆不使用名称并依赖 :value。 - 下面的例子。

<div
    v-if='twoSelection'
    :class="{ 'switch-field' : !smallSelection, 'small-switch-field':smallSelection}"
>
    <input
        type="radio"
        @change="categoryChange"
        :value="options[0] === my first radio value"
    />
    <label for="radio-first">
        {{ options[0].toUpperCase() }}
    </label>
<!-- Note value is the same on both but different conditions - this makes it a "group". -->
    <input
        type="radio"
        @change="categoryChange"
        :value="options[0] === 'my second radio value'"
    />
    <label for="radio-second">{{options[1].toUpperCase()}}</label>
</div>

methods:{
    categoryChange(event) {
        // @change provides an event that we can get the changed value with
        this.$emit("selectedCategory", event.target.value);
    }
},

Vue中如何多次使用radio作为组件？

How do I use radio as component multiple times in Vue?

data-visualization

vue.js