Nested properties in Vue components TEST

Do nested properties work in Vue components?

by nate

HTML

<div id="app">
  <h1>
    Do nested properties work in Vue components?
  </h1>
  <p>
    This is a very simple test of nested properties in a component's data object. OBVIOUSLY it works straightforwardly. Which means something else is going on in my stupid app.
  </p>
  <edit-thing></edit-thing>
</div>

JavaScript

var editThing = Vue.extend({
	template: '<form>' +
  	'<label for="thing-name">Name:</label>' +
    '<input id="thing-name" type="text" v-model="thing.name" />' +
    '<label for="thing-size">Size:</label>' +
    '<input id="thing-size" type="text" v-model="thing.size" />' +
    '</form>' +
    '<p class="debug">{{ thing.name }}</p>' +
    '<p class="debug">{{ thing.size }}</p>' +
    '<h3>Things it likes:</h3>' +
    '<template v-for="like in thing.likes">' +
    '<input type="text" v-model="like.name">' +
    '</template>' +
    '<button v-on:click.prevent="addLike()"> + </button>' +
    '<p class="debug" v-for="like in thing.likes">{{ like.name }}</p>',
  data: function () {
  	return {
    	thing: {
      	name: '',
        size: '',
        likes: [{}]
      }
    };
  },
  methods: {
  	addLike: function () {
    	this.thing.likes.push({});
    }
  }
});

Vue.component('edit-thing', editThing);

new Vue({
	el: '#app'
});