如何使只有一个元素激活vue js？答案

【问题标题】：How to make only one element activate vue js?如何使只有一个元素激活vue js？
【发布时间】：2021-01-14 10:50:04
【问题描述】：

vue js如何只让一个元素激活？我有3个下拉列表，一次激活3个，如何确保只有一个被激活？

据我了解，这需要通过循环来完成，但是这个框架不是给我的

<tr class="inputs-table">
            <td>Type object: </td>
            <td>
                <div class="select">
                    <div class="select-header form-control" v-on:click="AddForm">
                        <span class="select__current">Please select one option</span>
                        <span class="select__off">х</span>
                    </div>
                    <addForm v-if="addedForm" />
                </div>
            </td>
        </tr>
        <tr class="inputs-table">
            <td>Type business-model: </td>
            <td>
                <div class="select">
                    <div class="select-header form-control" v-on:click="AddForm">
                        <span class="select__current">Please select one option</span>
                        <span class="select__off">х</span>
                    </div>
                    <addForm v-if="addedForm"/>
                </div>
            </td>
        </tr>




import addForm from './modal/addForm.vue';

export default {
    name: 'Index',
    data() {
        return {
            addedForm: false
        }
    },
    methods: {
        AddForm(){
            this.addedForm = true;
        },
        closeForm() {
            this.$parent.addedForm = false;
        }
    },
    components: {
        addForm,
    }
}

【问题讨论】：

你的下拉列表在哪里？
prnt.sc/upk2oe 他来了
您似乎没有使用组件库，因此很难识别您提到的组件是什么，例如下拉菜单在哪里。您能否通过一些屏幕截图更新您的问题。

标签： vue.js vuejs2 vue-component

【解决方案1】：

根据您的问题和评论部分给定的屏幕截图，您似乎在addForm 组件中实现了下拉列表，并且当您在“类型对象”或“类型业务模型”组件中单击<div class="select-header form-control" v-on:click="AddForm"> 时将展开addForm 组件，您的问题是当您单击一个标题时，两个 addForm 组件都是可见的。

在这种情况下，可能有几种方法可以解决此问题。一种为每个组件添加编号并且仅在编号相等时才激活addForm 的简单方法。

<tr class="inputs-table">
            <td>Type object: </td>
            <td>
                <div class="select">
                    <div class="select-header form-control" v-on:click="AddForm(1)">
                        <span class="select__current">Please select one option</span>
                        <span class="select__off">х</span>
                    </div>
                    <addForm v-if="addedForm === 1" />
                </div>
            </td>
        </tr>
        <tr class="inputs-table">
            <td>Type business-model: </td>
            <td>
                <div class="select">
                    <div class="select-header form-control" v-on:click="AddForm(2)">
                        <span class="select__current">Please select one option</span>
                        <span class="select__off">х</span>
                    </div>
                    <addForm v-if="addedForm === 2"/>
                </div>
            </td>
        </tr>




import addForm from './modal/addForm.vue';

export default {
    name: 'Index',
    data() {
        return {
            addedForm: 0
        }
    },
    methods: {
        AddForm(number){
            this.addedForm = number;
        },
        closeForm() {
            this.$parent.addedForm = false;
        }
    },
    components: {
        addForm,
    }
}

由于您使用的是 3 个表单元素，这就足够了，但是如果您打算使用动态数量的组件，那么如果您使用诸如为每个类型对象创建列表之类的方法会很棒

items: [{id:1, title: 'Type Object'}, {id:2, title: 'Business Model'}]

然后在您的tr 组件中使用v-for，例如，

<tr class="inputs-table" v-for="item in items" key="item.id">
            <td>{{item.title}}: </td>
            <td>
                <div class="select">
                    <div class="select-header form-control" v-on:click="AddForm(item.id)">
                        <span class="select__current">Please select one option</span>
                        <span class="select__off">х</span>
                    </div>
                    <addForm v-if="addedForm === item.id"/>
                </div>
            </td>
        </tr>

【讨论】：