JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
	<select v-model="selected" @change=changeRoute($event)>
  <option disabled value="">Please select one</option>
  <option value='foo'>Foo</option>
  <option value='bar'>Bar</option>
</select>
<span>Selected: {{ selected }}</span>
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

JavaScript

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes 
})

const app = new Vue({
  router,
 data: {
    selected: ''
  },
  methods:{
  	changeRoute(event){
    	const path = event.target.value;
      this.$router.push({ path: `/${path}` });
    }
  }
}).$mount('#app')