JSFiddle - React, Tailwind, and code Playground

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <child @changed="updateVal" :vals="[1,2,3,4]"></child>
  <h1>
    {{val}}
  </h1>
</div>

CSS

.active {
  color: green
}

JavaScript

Vue.component('child', {
	template: `<select v-model="selected" @change="$emit('changed', selected)"><option v-for="val in vals">{{val}}</option></select>`,
  props: ['vals'],
  data() {
  	return { selected: null }
  }
});

const vm = new Vue({
    el: '#app',
    data() {
      return {
        val: null
      };
    },
    methods: {
      updateVal(val) {
	      this.val = val
      }
    }
});