선택 옵션을 즉시 동적으로 생성

선택 옵션을 즉시 동적으로 생성

선택 항목이 두 개 있는데 하나는 데이터가 있고 다른 하나는 비어 있습니다.첫 번째가 선택되면 스위치로 잡습니다.값에 따라 옵션 요소를 생성하여 빈 선택 안에 넣습니다.

예를 들어, 내가 일련의 가치관을 가지고 있다고 합시다.

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>

두 번째 옵션의 빈 어레이를 정의할 수 있습니다.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>

언급URL : https://stackoverflow.com/questions/45494106/dynamically-create-select-options-on-the-fly