Without Router

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>
    <a href="#" @click.prevent="name='No Name'; testArray=[]">No Name</a><br>
    <a href="#" @click.prevent="name='Foo'; testArray=[]">foo</a><br>
    <a href="#" @click.prevent="name='Bar'; testArray=[]">bar</a><br>

  </p>
  <testcomponent v-if="name !==''" v-bind:name="name" v-bind:test="testArray" v-bind:changeprops="changeProps"></testcomponent>
</div>

Babel + JSX

Vue.component("testcomponent", {
	props: ['name','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>
      <button @click="changeprops">Change Props</button>
    </div>`,
});
const app = new Vue({ 
  data: {
 		testArray: [],
    name: ""
  },
  methods: {
  	changeProps: function() {
    	const tmp = [{name: 'test 3', id: Math.random() },{name: "test 1", id: Math.random()},{name: "test2", id: Math.random()}];
    	//Vue.set(this,'testArray', tmp);
      this.testArray = Object.assign([],tmp);
      //this.testArray = this.testArray.slice();
      //this.testArray.push(... tmp);
      //this.testArray = [];
      //this.testArray.push(... tmp);
      //this.testArray.splice(0,0,{name: "test"});
      //this.testArray = Object.assign([], tmp);
		}
  }
 }).$mount('#app')