How to make only one element activate vue js? - vue.js

Question

How to make only one element activate vue js?
I have 3 drop-down lists, 3 are activated at once, how do I make sure that only one is activated?
As far as I understand, this needs to be done through a loop, but this framework is not given to me
<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,
}
}

Answer 1

with your question and the given screenshot on the comment section, it seems you implement dropdown list in your addForm component and when you click on <div class="select-header form-control" v-on:click="AddForm"> in "type object" or "Type business-model" component will expand the addForm component and your problem is when you click on one header both addForm components are visible.
In that case, there may be several methods to fix this. One easy way to add numbering to each component and only activate the addForm if number equals.
<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,
}
}
Since you are using 3 form element this would be enough but if you are planning to use a dynamic number of components it would be great if you use for a method such as create list for each type object
items: [{id:1, title: 'Type Object'}, {id:2, title: 'Business Model'}]
Then use v-for in your tr component such as,
<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>