Multiple nested dropdown menu in vuejs

Question

I'm building a Vue SPA, I have this vue element

  var appCataloghi = new Vue({
  el: '#appCataloghi',
  data: {
    cataloghi: oggettoCataloghi.cataloghi,
    viaggi: oggettoViaggi, 
  },
  methods: {
    popolaViaggi: function() {
  
    }
  }

})

oggettoViaggi is this json Object

'{"viaggiGuidati":[{"nazione":"Spagna","viaggi":[{"id":"1423","nome":"primoviaggioGSpagna"},{"id":"1424","nome":"secondoviaggioGSpagna"}]},{"nazione":"Giappone","viaggi":[{"id":"1523","nome":"scopertadelGiappone"},{"id":"1524","nome":"Giappone"}]}],"itinerari":[{"nazione":"Cina","viaggi":[{"id":"2423","nome":"primoviaggioCina"},{"id":"2424","nome":"secondoviaggioCina"}]},{"nazione":"Lettonia","viaggi":[{"id":"2523","nome":"primoviaggioLettonia"},{"id":"2524","nome":"secondoviaggioLettonia"}]}]}'

and oggettoCataloghi is this json Object:

'{"cataloghi":[{"id":"1000","nome":"mete
europee","viaggi":[{"id":"1423","nome":"primoviaggioGSpagna","nazione":"Spagna",
"tipologia" : "Viaggi
guidati"},{"id":"1424","nome":"secondoviaggioGSpagna","nazione":"Spagna",
"tipologia" : "Viaggi guidati"}], "descrizione" : "Viaggi per clienti
amanti del giappone"},{"id":"1001","nome":"viaggi
giappone","viaggi":[{"id":"1523","nome":"scopertadelGiappone","nazione":"Giappone",
"tipologia" :
"Itinerari"},{"id":"1524","nome":"Giappone","nazione":"Giappone",
"tipologia" : "Itinerari"}]}]}'

and I want to create a multiple dependent dropdown menu as shown in the image below

While my html structure is:

<div class="viaggi">
    <div class="row viaggio" v-for="viaggio in catalogo.viaggi"> 
        <div class="col-xs-12 col-sm-3"> 
            <label class="label">Tipologia:</label> 
            <select class="inputCatalogo greyInput tipologiaViaggio" v-model="tipologia">
                <template  v-if="typeof viaggio.id !== 'undefined'">
                    <option selected>{{viaggio.tipologia}}</option>
                </template >
                <template  v-else>
                    <option disabled selected>--Scegli tipologia--</option> 
                    <option value="Viaggi guidati">Viaggi guidati</option> 
                    <option value="Itinerari su misura">Itinerari su misura</option> 
                </template >
            </select> 
        </div> 
        <div class="col-xs-12 col-sm-3"> 
            <label class="label">Nazione:</label> 
            <select class="inputCatalogo greyInput nazioneViaggio"> 
                <template  v-if="typeof viaggio.id !== 'undefined'">
                    <option selected>{{viaggio.nazione}}</option>
                </template >
                <template  v-else>
                    <option disabled selected>--Scegli nazione--</option> 
                    <option v-for="opzioneNazione in viaggio.tipologia"> 
                        {{ opzioneNazione.nazione }}
                    </option>
                </template >    
            </select> 
        </div> 
        <div class="col-xs-12 col-sm-5"> 
            <label class="label">Nome del viaggio:</label> 
            <select class="inputCatalogo greyInput viaggioViaggio"> 
                <template  v-if="typeof viaggio.id !== 'undefined'">
                    <option :value="viaggio.id" selected>{{viaggio.nome}}</option>
                </template >
                <template  v-else>
                    <option disabled selected>--Scegli viaggio--</option> 
                </template >  
            </select> 
        </div> 
        <div class="col-xs-12 col-sm-1"> 
            <i class="fa fa-times fa-2x eliminaViaggio" aria-hidden="true"></i> 
        </div> 
    </div>
</div>

How can I know which "Tipologia" is selected considering I have to do it for each nested dropdown inside my Vue objected called appCataloghi? I think I have to create a property foreach dropdown inside my var appCataloghi but how?

My idea is to iterate with a v-for like this: v-for="SecondOptions in list.firstOption"

But where I save first option if first option can be multiple inside the same var appCataloghi?

Answer 1

That's how i resolved, I used an index and then accessed the array by index:

<div class="row viaggio" v-for="(viaggio, index) in catalogo.viaggi" :key=viaggio> 
 <i class="fa fa-times fa-2x eliminaViaggio" @click="eliminaViaggio($event, index, 
 indiceViaggio)" aria-hidden="true"></i> 
 ...
</div>

the function in my JS:

eliminaViaggio: function(event, indiceCatalogo, index) {
     this.cataloghi[index].viaggi.splice(index, 1);
     var clickedElement = event.target.closest('.catalogo');
...