Vue.js依賴選擇

我在開始階段學習Vue.js，並遇到我現在無法弄清楚的問題。所以，我有1個選擇字段：Vue.js依賴選擇

data: { 
    list: { 
    'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ] 
    } 
}

然後我填充第一選擇場這樣的：

<select v-model="firstOptions" v-on:change="onChange"> 
    <option v-for="(item, index) in list">{{ index }}</option> 
</select>

此時一切都很好，但如何填充基於先選擇不同的選擇字段？我需要訪問大小和價格。

我想這應該是在這裏完成：

methods: { 
    onChange: function() { 
    // get options for second select field 
    } 
}

來源

2017-02-26 RomkaLTU

您可以預定義一個dependantSelectArray。在onChange方法中，您可以用選擇數據填充它。所以你可以v-for這個dependentSelectArray及其子值。此外，您可以將模型設置爲depentandOptions ['key-for-your-select']。 –

是的，我明白這個邏輯，但我不明白如何編寫它。對於excample console.log（this.list）帶給我整個列表，但我無法從該列表中獲取特定的選定項。 – RomkaLTU

您將其命名爲firstOptions。當你選擇另一個值時它可能會改變。在onChange菜單你可以console.log（app.firstOptions） –

我假設在這裏你的數據結構，list，每個屬性的值定義您將在第二個選擇的選項。這裏的關鍵是第一個選擇的模型驅動第二個選項。

<option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>

我不確定您希望您的文本和值在第一次或第二次選擇中的排列方式如何，但這裏是一個示例。

new Vue({ 
    el:"#app", 
    data: { 
    firstOption: null, 
    secondOption: null, 
    list: { 
     'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ], 
     'Option 2': [{size:'3', prize:'8'}] 
    } 
    } 
})

，並在您的模板

<div id="app"> 
    <select v-model="firstOption"> 
    <option v-for="(item, index) in list">{{ index }}</option> 
    </select> 
    <select v-model="secondOption" v-if="firstOption"> 
    <option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option> 
    </select> 
</div>

Example in codepen。

來源

2017-02-26 18:50:40 Bert

是的，現在更清楚謝謝。我已經實現了這個以不同的方式，改變了jSON結構和做onclick事件v-on：click =「onclick（firstListItemObj）」然後在方法onclick我可以訪問firstListItemObj並返回this.secondListItemObj = firstListItemObj.options Yeah ant I選擇更改爲ul，所以在這裏我做onClick不onChange。 – RomkaLTU

Vue.js依賴選擇

回答

相關問題