Vue 2.0 Hello World

by Robodude

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.v">
    {{ option.v }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
<select v-model="selected2">
  <option v-for="option in level2" v-bind:value="option.v">
    {{ option.v }}
  </option>
</select>
<span>Selected: {{ selected2 }}</span>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    selected: 'B',
    selected2: "B2",
    options: [
      { v: 'A', c:[{ v: 'A1', c:[] }, { v: 'A2', c:[] }] },
      { v: 'B', c:[{ v: 'B1', c:[] }, { v: 'B2', c:[] }] },
      { v: 'C', c:[{ v: 'C1', c:[] }, { v: 'C2', c:[] }] }
    ]
  },
  computed: {
  	level2() {
    	return this.options.find(o => o.v === this.selected).c;
    }
  }
})