オンザフライで選択オプションを動的に作成

Question

私は2つの選択肢を持っています.1つはデータと1つは空です。最初のものが選択されたら、スイッチを使ってそれを捕まえます。さて、値に応じて、オプション要素を作成し、それらを空の選択の中に入れたいと思います。

Answer 1

あなただけ定義することができます。

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

---

これは私のテンプレートで選択しているが、選択したときの私は値

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

の配列を持っているとしましょう2番目のオプションの空の配列selectを入力し、スイッチ/ケースで値をプッシュします。

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/vue@2.4.2"></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>

：後で、例えば v-for でその値を使用することができます