时间戳

首页 > 解决方案 > vuejs中的多个嵌套下拉菜单

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

问题描述

我正在构建一个 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>

考虑到我必须为我的 Vue 反对名为 appCataloghi 的每个嵌套下拉菜单执行此操作，我如何知道选择了哪个“Tipologia”？我想我必须在我的 var appCataloghi 中创建一个属性 foreach 下拉列表，但是如何？

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

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

标签： javascriptvue.js

解决方案

这就是我解决的方法，我使用了一个索引，然后按索引访问了数组：

<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');
...

推荐阅读