Vue

by krustnic

HTML

<div id="app">
  <temp-component :inbox='inbox'></temp-component>
</div>

<template id="temp">
  <div>
    <button @click="start">start</button>
  <h2>Todos ({{ selected }}):</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-model="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
  </div>
</template>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var gTodos = [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
      
Vue.component('temp-component', {
  template: '#temp',  
  props: {
  	inbox: {
    	type: Array,
      default () {
      	return []
      }
    }
  },
  data () {
    return {
    	todos: []
    }
  },
  methods: {
  	start: function(){
    	gTodos.map(m => {
      	nm = m
      	// nm = Object.assign({}, m)                
      	// nm.done = true        
      	this.todos.push(nm)
      })
    }
  },
  computed: {
  	selected () {
    	var s = 0
      this.todos.map(m => {      	
      	if (m.done) s += 1
      })
      return s
    }
  },
  watch: {
  	todos : {
    	handler: function (after, before) {
        console.log('child change')
      },
      deep: true
    }
  }
})

new Vue({
  el: "#app",
  data () {
  	return {
    	inbox: gTodos 
    }
  },
  watch: {
  	inbox : {
    	handler: function (after, before) {
        console.log('parent change')
      },
      deep: true
    }
  }
})