[VR 前後端交響曲Day11] Vue元件單向傳遞: $emit 製作todo list

第 12 屆 iThome 鐵人賽

DAY 11

Modern Web

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站系列第 11 篇

12th鐵人賽 vue vue.js

貓貓工程師 / PM Ting

2020-09-26 00:01:27

1321 瀏覽

分享至

經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後，今天來利用$emit的特性，設計一個~~有3M便利貼風格~~的to-do list吧!

實作需求：

新增
我想要在input欄位裡，讓使用者從Todos元件輸入本日代辦事項，
按完enter送出後，把資料送去Root元件裡顯示。
刪除
點擊任一的todo item，就可以把item從todo陣列裡移除。

Step0. Todos元件：設計`template`

把input form綁上雙向事件處理的v-on，讓使用者enter送出後呼叫createItem這個methods裡面的function。

Step1. Todos元件的methods: `$emit('自訂事件名稱')`傳出事件

createItem($event)方法裡面帶了參數，讓我們可以把$event.target.value傳到上層的Vue Instance。

Todos.vue

<template id="todo-3M">
  <div class="todo-form">
      <label>本日To do list</label><i class="fas fa-pencil-alt" ></i><hr>
      <input class="todo-input" type='text' @keyup.enter="createItem" placeholder="請輸入您今天的代辦事項">
  </div>
</template>

<script>
  export default {              
    methods: {
      createItem($event){
        this.$emit("additem", $event.target.value)
        $event.target.value = ""
      }
    },
    template: "#todo-3M"
  }
</script>

<style scoped>
<!-- 略 -->
</style>

Step2. 在Vue Root掛載點，接收傳出來的事件

Vue Root掛載點內的<Todos>元件，綁上雙向事件處理的v-on，
讓<Todos>元件傳遞出來的additem可以跟Root元件的addMoreItem綁定

home.html.erb

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案：{{ day }}</div>
  <div class="main-body">本日主題：{{ topic }}</div>

  <Todos @additem="addMoreItem"></Todos>
  <ul class="todo-item">
    <li v-for="todo in todos" @click="removeItem(todo)"><i class="far fa-calendar-check"></i> {{ todo }} </li>
  </ul>
  
  <Foot></Foot>
</div>

Step3. 父元件接收事件後，執行`addMoreItem()` function

我的todos陣列初始值預設有三件代辦事項。父元件接收事件之後，還可以再把其他代辦事項push進去這個陣列。

Step4. `v-for`裡的todo迴圈，使用`@click`事件綁定`removeItem(todo)` function

若對單一todoitem點擊，則透過javascript的splice方法，把該項todo item從陣列中移除。

home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Todos from "../components/todos"
import Foot from "../components/foot"


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      el,
      data: {
        day: "第 11 天",
        topic: "元件的由內而外傳遞事件 - emit",
        todos: ["買咖啡", "買口罩", "去郵局"],
      },
      methods: {
        addMoreItem(item){
          this.todos.push(item)
        },
        removeItem(item){
          let itemIndex = this.todos.indexOf(item)
          if (itemIndex >= 0){
            // 從array中刪除項目，並回傳被刪除後的項目
            this.todos.splice(itemIndex, 1)
          }
        }
      },
      components: { Todos, Foot }
    })    
  }
})

完成圖：