動態創建動態選擇選項

我有2個選擇，一個是數據，另一個是空的。當第一個被選中時，我用一個開關捕捉它。現在，根據值，我想創建選項元素，並將它們放入空選擇。動態創建動態選擇選項

比方說，我有價值觀

var values = ['Hello', 'world', 'etc']

的陣列時選擇

selected(event) { 
    var name; 
    switch (event.target.value) { 
    case 'roth': 
     // append values as options into select, using foreach 
     // such as: 
     // <option value="hello">Hello</option> 
    ... 
    } 
}

這是我的模板中進行選擇：

來源

2017-08-03 senty

你可以只定義第二個選項的空陣列，並用您的開關/外殼推送值。稍後，您可以使用該值與v-for 例如：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    selectValues: ['Hello', 'world', 'etc'], 
 
    secondarySelectValues: [], 
 
    }, 
 
    methods: { 
 
    handleChange: function(e) { 
 
     switch (e.target.value) { 
 
     case 'Hello': 
 
      this.secondarySelectValues = []; 
 
      this.secondarySelectValues.push('this', 'is', 'hello'); 
 
      break; 
 
     case 'world': 
 
      this.secondarySelectValues = []; 
 
      this.secondarySelectValues.push('this', 'is', 'world') 
 
      break; 
 
     case 'etc': 
 
      this.secondarySelectValues = []; 
 
      this.secondarySelectValues.push('this', 'is', 'etc') 
 
      break; 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]"></script> 
 
<div id="app"> 
 

 
    <select class="form-control" @change="handleChange"> 
 
    <option v-for="selectValue in selectValues" :value="selectValue">{{ selectValue }}</option> 
 
    </select> 
 

 
    <select class="form-control secondary"> 
 
    <option v-for="secondarySelectValue in secondarySelectValues" :value="secondarySelectValue">{{ secondarySelectValue }}</option> 
 
    </select> 
 

 
</div>

來源

2017-08-03 20:55:47

動態創建動態選擇選項

回答

相關問題