动态创建动态选择选项

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

动态创建动态选择选项

回答

相关问题