动态创建选择选项答案

【问题标题】：Dynamically create select options on the fly动态创建选择选项
【发布时间】：2018-01-11 15:25:48
【问题描述】：

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

这是我模板中的选择：

<select class="form-control" :id="selection">
    <option selected="" disabled="" value="0"></option>
</select>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以为第二个select 的选项定义一个空数组，并使用您的开关/案例推送值。稍后您可以将该值与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/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>

【讨论】：