Vue.js select 下拉選單示範

這裡是示範一個下拉選單，其中的關係包含被選擇的項目，以及關聯的下一層選單。簡單練習而已，一定還是有更好的寫法。

HTML

<div id="app"> 
    <select v-model="selected_p" v-on:change="onProductChange">
     <option value="">請選擇</option>
     <option v-for="product in product_lists" value="{{ product }}">
       {{ product }}
     </option>
    </select>
    
    <select v-model="selected_p_detail_item">
      <option value="">請選擇</option>
      <option v-for="detail in product_detail[selected_p]" value="{{ detail}}">{{ detail }}</option>
    </select>
    
    <hr>
    <div>選擇的產品為: {{ selected_p }}</div>
    <div>子項目: {{ selected_p_detail_item }}</div>
    <div>取得完整的名稱: {{ getProductSarchName() }}</div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    selected_p: '',
    selected_p_detail_item: '',
    product_lists: [
      '手錶',
      '衣服'
    ],
    product_detail: {
      '手錶': [
        'apple watch',
        'epson',
        '星辰'
       ],
      '衣服': [
        'roots',
        'hang ten',
        'lativ'
       ]
    }
  },
  methods: {
     onProductChange: function() {
       // reset!
       this.selected_p_detail_item = '';
     },
     getProductSarchName: function() {
      var result = this.selected_p + '\t' + this.selected_p_detail_item; console.log(result);
        
       return  result;
     }
  }
});

Result JSbin
JS Bin on jsbin.com