I want to display data for each record by language(so more languages will be there, there will be more tabs for each record),
So I made a simple method, if the value equals key and index it should display the required tab.
I have following markup in template:
<div
class="nav-item"
v-for="(property, keyProp) in item.props"
:key="keyProp"
>
<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
<li class="nav-item" v-for="(language, key) in property" :key="key">
<a
class="nav-link"
data-bs-toggle="tab"
@click="toggle(key + keyProp)"
>
{{ key }}
</a>
</li>
</ul>
<div
v-for="(language, key) in property"
:key="key"
v-show="isOpenIndex === key + keyProp"
>
{{ key + keyProp }}
<input
type="text"
v-model="language.text"
class="form-control form-control-solid"
/>
</div>
</div>
And method:
methods: {
toggle: function (index) {
this.isOpenIndex = index;
},
But for some reason it doesn't work in this way. I can make it work like if I add to data something like isOpenIndex: this.IsOpenIndex but it will display only one tab in a time, closing others if I press another. How to prevent that?
I only want to close the previously opened tab if it's the same record only.
So I come up with this, slightly modified method function and everything works.
toggle: function (id, lang, type) {
for(var key in this.item.props[id][lang]) {
var prop = this.item.props[id][lang][key];
if(prop.active === true) {
return [ prop.active = false, this.item.props[id][lang][type].active = true ]
}
}
return this.item.props[id][lang][type].active = true
},
I've added to each value active: false, so by default all hidden. Though when method gets run, it replaces false to true, if true already set it goes though if statement inside loop and drop old parameter to false and replace new one with true