时间戳

首页 > 解决方案 > 如何在 Vue 中多次使用收音机作为组件？

vue.js - 如何在 Vue 中多次使用收音机作为组件？

问题描述

我在 vue 中做了一个 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.jsdata-visualization

解决方案

这里有很多事情你应该考虑修复：

  1. 删除 id - 由于您两次使用该组件，因此您最终会得到相同的 id 两次。id 属性应该是唯一的。
  2. v-model 本质上:value和@change组合一样。这意味着您最好不要使用:value，@change可以使用，但不是必需的。我认为在你的情况下，它会更容易使用:value和@change. 下面的例子。
  3. 不要在此处使用名称，因为它将无线电分组（您的初始问题）。同样，由于您多次使用该组件，因此名称将重复。这意味着您生成的第二个按钮中的按钮将被分组到同名的第一个按钮。您可以以与 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);
    }
},

推荐阅读