如何在 Vue 中多次使用收音机作为组件？答案

【问题标题】：How do I use radio as component multiple times in Vue?如何在 Vue 中多次使用收音机作为组件？
【发布时间】：2021-07-02 23:27:48
【问题描述】：

我在vue中做了一个switch组件。并且这个 switch 组件将选择的数据发送到它的父模板，如下所示。

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 组件传达相同的数据。

父母

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

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

渲染后，视图如下所示。

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

【问题讨论】：

标签： vue.js data-visualization

【解决方案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);
    }
},

【讨论】：