I have a Vue.js dropdown and I would like to show or hide my div based on the selected value in the dropdown. The current code is only working for one ID, but I want it to work for all IDs. I want to toggle the visibility of my div based on the option's value. For example, if the value is 1, then only the test_1 div should be shown.
<template>
<div>
<multiselect
v-model="optionsData[0]"
:options="optionsData"
:custom-label="nameWithLang"
placeholder="Pick some"
label="data"
track-by="data"
@change="hideshowdiv"/>
</div>
<div id="test_1">test 1</div>
<div id="test_1">test 1</div>
<div id="test_1">test 1</div>
<div id="test_1">test 1</div>
<div id="test_1">test 1</div>
<div id="test_2">test 2</div>
<div id="test_2">test 2</div>
<div id="test_2">test 2</div>
<div id="test_2">test 2</div>
<div id="test_2">test 2</div>
</template>
export default {
components: {
Multiselect,
InputTag
},
data() {
return {
optionsData: [
{ id: '1', data: 'Value1' },
{ id: '2', data: 'Value2' }
],
};
},
methods: {
hideshowdiv(value) {
document.getElementById("test_" + value).style.display = "block";
}
}
}