vue 단계 셀렉트박스

단계별 셀렉트 박스 코드

<div id="app">

  <h2>단계 셀렉트박스</h2>
  
  <select v-model="selectedOne" @change="loadData">
    <option v-for="select in selectedOne">{{ select.name }}</option>
  </select>

  <div v-if="selectedOne && !selected2.length"><i>Loading</i></div>
  <select v-if="selected2.length">
    <option v-for="item in selected2">{{ item.label }}</option>
  </select>
  
</div>

const app = new Vue({
  el:'#app',
  data:{
    //options:["people","starships","vehicles","species","planets"],
    selected2:[
        {"label": "AAA-ITEM","name":"AAA"},
        {"label": "BBB-ITEM","name":"BBB"},
        {"label": "CCC-ITEM","name":"CCC"}      ],
    selectedOne:[]
  },
  created () {
    // 뷰가 생성되고 데이터가 이미 감시 되고 있을 때 데이터를 가져온다.
    this.selectedOneload();
  },  
  methods:{
    selectedOneload:function() {
      //데이터 불러오기
      this.selectedOne = [
        {  "label": "AAA","name": "AAA"   },
        {  "label": "BBB","name": "BBB"   },
        {  "label": "CCC","name": "CCC"   }
      ];      
      
    },
    loadData:function(onselect) {
//console.log(onselect.target.value);
				return this.selected2.filter(function(ps) {
          console.log(ps);
					return ps.name === onselect.target.value;
				});        
            
      // 서버 구현 완료시
      //let key = 'name';
      //fetch('https://swapi.co/api/'+this.selectedOne)
      //.then(res=>res.json())
      //.then(res => {
      //  this.items = res.results.map((item) =>{
      //        item.label = item[key];
      //        return item;
      //  });
      // });
    }
  }
});

 참고 :  https://codepen.io/cfjedimaster/pen/mqoaxV