JSFiddle - React, Tailwind, and code Playground

by jessekinsman

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">
  <p>
    <router-link to="/detail">No Name</router-link><br>
    <router-link to="/detail/foo">foo</router-link><br>
    <router-link to="/detail/bar">bar</router-link><br>
  </p>
  <router-view></router-view>
</div>

Babel + JSX

let VueComponent = Vue.extend({
	props: ['test','changeprops'],
  template: `
  	<div>
  		<div>Execute only once '{{name}}', Not initialized again？？？</div>
      <p v-for="(item, index) in test" :key="index">
      Index: {{index}} Name: {{item.name}} ID:{{ item.id }}</p>
    	<div>Current route '{{$route.params.name}}'</div>
      <button @click="changeprops">Change Props</button>
    </div>`,
  data(){
    return {
      name: this.$route.params.name
    };
  },
  beforeRouteUpdate(to) {
    this.name = to.params.name
  }
});
const app = new Vue({ 
  data: {
 		testArray: []
  },
  beforeMount: function() {
  const routes = [
    {
      path: '/detail/:name?', 
      component: VueComponent,
      props: { test: this.testArray, changeprops: this.changeProps }
    }
  ];
  this.$router.addRoutes(routes);
  },
  router: new VueRouter({ mode: 'history'}),
  methods: {
  	changeProps: function() {
    	const tmp = [{name: 'test 3', id: Math.random() },{name: "test 1", id: Math.random()},{name: "test2", id: Math.random()}];
      this.testArray.splice(0,this.testArray.length);
      this.testArray.push(...tmp);
		}
  }
 }).$mount('#app')