duncan60/.html

## .html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <h1>Vue Todo Practice</h1>
  <div id="app" >
    <div>
      <p>Need Todo</p>
      <ul>
        <todo-item
          v-for="(item, key) in todos"
          v-if="!item.isComplete"
          :todo="item"
          :key="key"
          :edit="onEdit"
          :save="onSave"
          :complete="onComplete">
        </todo-item>
        <li>
          <input placeholder="Enter text" v-model="newTask">
          <button @click="onAddTodo" :disabled="isDisabled">
            add new task
          </button>
        </li>
      </ul>
    </div>
    <div>
      <p>Complete Todo</>
      <ul>
        <todo-item
          v-for="(item, index) in todos"
          v-if="item.isComplete"
          :todo="item"
          :key="item.id"
          :restore="onRestore">
        </todo-item>
      </ul>
    </div>
  </div>
</body>
</html>

## .js

Vue.component('todo-item', {
  props:['todo', 'edit', 'save', 'complete', 'restore'],
  data() {
    return {
      text: this.todo.text
    }
  },
  methods: {
    onHandler(type) {
      this[type](this.todo, this.text);
    }
  },
  template: `
    <li v-if="!todo.isEdit && !todo.isComplete">
      <span>
        {{ text }}
      </span>
      <button @click="onHandler('complete')">
        complete
      </button>
      <button @click="onHandler('edit')">
        edit
      </button>
    </li>
    <li v-else-if="todo.isComplete">
      <span>
        {{ todo.text }}
      </span>
      <button @click="onHandler('restore')">
        restore
      </button>
    </li>
    <li v-else>
      <input type="text" v-model="text">
      <button @click="onHandler('save')">
        save
      </button>
    </li>
  `
})


const app = new Vue({
  el: '#app',
  data: {
    isDisabled: true,
    newTask: '',
    todos: {
      1:{ id:1, text: '學習 JavaScript', isEdit: false, isComplete: false },
      2:{ id:2, text: '學習 Vue', isEdit: false, isComplete: false },
      3:{ id:3, text: '學習 React', isEdit: false, isComplete: true }
    }
  },
  watch: {
    newTask () {
      this.isDisabled = this.newTask !== '' ? false : true
    },
  },
  methods: {
    onAddTodo() {
      newTaskId = parseInt(1000*Math.random());
      this.$set(this.todos, newTaskId, {
        id: newTaskId,
        text: this.newTask,
        isEdit: false,
        isComplete: 0
      })
      this.newTask = '';
    },
    updateTodos(todo) {
      this.$set(this.todos, todo.id, { ...todo });
    },
    onEdit(todo) {
      this.updateTodos({
        ...todo,
        isEdit: true,
      });
    },
    onSave(todo, newText) {
      this.updateTodos({
        ...todo,
        text: newText,
        isEdit: false,
      });
    },
    onComplete(todo) {
      this.updateTodos({
        ...todo,
        isComplete: true
      });
    },
    onRestore(todo) {
      this.updateTodos({
        ...todo,
        isComplete: false
      });
    }
  }
})
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="//cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
	<h1>Vue Todo Practice</h1>
	<div id="app" >
	<div>
	<p>Need Todo</p>
	<ul>
	<todo-item
	v-for="(item, key) in todos"
	v-if="!item.isComplete"
	:todo="item"
	:key="key"
	:edit="onEdit"
	:save="onSave"
	:complete="onComplete">
	</todo-item>
	<li>
	<input placeholder="Enter text" v-model="newTask">
	<button @click="onAddTodo" :disabled="isDisabled">
	add new task
	</button>
	</li>
	</ul>
	</div>
	<div>
	<p>Complete Todo</>
	<ul>
	<todo-item
	v-for="(item, index) in todos"
	v-if="item.isComplete"
	:todo="item"
	:key="item.id"
	:restore="onRestore">
	</todo-item>
	</ul>
	</div>
	</div>
	</body>
	</html>

	Vue.component('todo-item', {
	props:['todo', 'edit', 'save', 'complete', 'restore'],
	data() {
	return {
	text: this.todo.text
	}
	},
	methods: {
	onHandler(type) {
	this[type](this.todo, this.text);
	}
	},
	template: `
	<li v-if="!todo.isEdit && !todo.isComplete">
	<span>
	{{ text }}
	</span>
	<button @click="onHandler('complete')">
	complete
	</button>
	<button @click="onHandler('edit')">
	edit
	</button>
	</li>
	<li v-else-if="todo.isComplete">
	<span>
	{{ todo.text }}
	</span>
	<button @click="onHandler('restore')">
	restore
	</button>
	</li>
	<li v-else>
	<input type="text" v-model="text">
	<button @click="onHandler('save')">
	save
	</button>
	</li>
	`
	})


	const app = new Vue({
	el: '#app',
	data: {
	isDisabled: true,
	newTask: '',
	todos: {
	1:{ id:1, text: '學習 JavaScript', isEdit: false, isComplete: false },
	2:{ id:2, text: '學習 Vue', isEdit: false, isComplete: false },
	3:{ id:3, text: '學習 React', isEdit: false, isComplete: true }
	}
	},
	watch: {
	newTask () {
	this.isDisabled = this.newTask !== '' ? false : true
	},
	},
	methods: {
	onAddTodo() {
	newTaskId = parseInt(1000*Math.random());
	this.$set(this.todos, newTaskId, {
	id: newTaskId,
	text: this.newTask,
	isEdit: false,
	isComplete: 0
	})
	this.newTask = '';
	},
	updateTodos(todo) {
	this.$set(this.todos, todo.id, { ...todo });
	},
	onEdit(todo) {
	this.updateTodos({
	...todo,
	isEdit: true,
	});
	},
	onSave(todo, newText) {
	this.updateTodos({
	...todo,
	text: newText,
	isEdit: false,
	});
	},
	onComplete(todo) {
	this.updateTodos({
	...todo,
	isComplete: true
	});
	},
	onRestore(todo) {
	this.updateTodos({
	...todo,
	isComplete: false
	});
	}
	}
	})