Vue.js 如何使只有一个元素激活vue js？

如何使只有一个元素激活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,
    }
}

类型对象：
请选择一个选项
х
类型商业模式：
请选择一个选项
х
从“./modal/addForm.vue”导入addForm；
导出默认值{
名称：'索引'，
数据（）{
返回{
addedForm:false
}
},
方法：{
AddForm（）{
this.addedForm=true；
},
closeForm（）{
此.$parent.addedForm=false；
}
},
组成部分：{
addForm，
}
}

通过您的问题和评论部分的给定屏幕截图，您似乎在

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

然后在

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>

{{item.title}}：
请选择一个选项
х

您的下拉列表在哪里？在这里，他认为您似乎没有使用组件库，因此很难确定您提到的组件是什么，例如下拉列表在哪里。你能用一些截图更新你的问题吗。

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