I am currently in the process of developing a Vue single page application and have encountered a challenge with a Vue element I am working on.
var appCataloghi = new Vue({
el: '#appCataloghi',
data: {
cataloghi: oggettoCataloghi.cataloghi,
viaggi: oggettoViaggi,
},
methods: {
popolaViaggi: function() {
}
}
})
The JSON object for 'oggettoViaggi' is structured as follows:
'{"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",&qu...
The JSON object for 'oggettoCataloghi' is structured as follows:
'{"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"}]}]}'
I aim to create a multiple dependent dropdown menu as illustrated in the image below
https://i.sstatic.net/QYiv0.jpg
My current HTML structure is as follows:
<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>--Choose typology--</option>
<option value="Guided tours">Guided tours</option>
<option value="Tailored itineraries">Tailored itineraries</option>
</template >
</select>
</div>
<div class="col-xs-12 col-sm-3">
...
</div>
...
</div>
</div>
In order to determine which "Typology" has been selected for each nested dropdown within my Vue object 'appCataloghi', I believe I need to create a property for each dropdown. However, I am unsure how to approach this.
My line of thinking involves iterating with a v-for like this:
v-for="SecondOptions in list.firstOption"If there are multiple first options within the same 'appCataloghi' variable, how would I save the first option?