Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <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>
</body>
</html>
 
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;
     }
  }
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers