javascript - vuejs中的多个嵌套下拉菜单

Question

我正在构建一个 Vue SPA，我有这个 vue 元素

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

})

oggettoViaggi 是这个 json 对象

'{"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"}]}]}'

oggettoCataloghi 是这个 json 对象:

'{"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"}]}]}'

我想创建一个如下图所示的多重依赖下拉菜单

虽然我的 html 结构是:

<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>

我怎么知道选择了哪个“Tipologia”考虑到我必须为我的 Vue 对象内的每个嵌套下拉列表执行它，称为 appCataloghi？我想我必须在我的 var appCataloghi 中为每个下拉列表创建一个属性，但是怎么做呢？

我的想法是像这样使用 v-for 进行迭代:v-for="SecondOptions in list.firstOption"

但是如果同一个 var appCataloghi 中的第一个选项可以有多个，我在哪里保存第一个选项？

Answer 1

我就是这样解决的，我使用了一个索引，然后通过索引访问数组:

<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>

我的 JS 中的函数:

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