vue.js step1

by ydozen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="todoApp">
  <input type="text" v-model="wk.todo" v-on:keydown.enter="addTodo">
  <div>
    <div v-for="t in wk.todos" :key="t.id" >
      {{t.name}}
    </div>
  </div>
</div>

JavaScript

var app = new Vue({
  el: '#todoApp',
  data: {
    wk: {
        todo: "",
        todos: []  
    }
  },
  methods: {
    addTodo: function() {
    	this.wk.todos.push({
      	id: this.wk.todos.length,
      	name: this.wk.todo
      })
      console.log("test")
      this.wk.todo = ""
    }
  },
  watch: {
		'wk.todo': function(v) {
      	console.log(v.length);
        if (v.length >= 8) { this.wk.todo = "WOW" } 
  		},
      deep: false
    }
})