06. 使用者輸入與列表呈現 (v-for)

列出資料到畫面，並且能輸入新增資料：

摘要

1. 列表呈現：用 v-for 將資料列出，呈現到畫面上。
2. 取得使用者輸入資料：當使用者觸發 Enter 按鍵的 keyup 事件時，會將 input 的內容透過 v-model 更新到 data 中。

列表呈現：v-for

使用 v-for="(item,index) in items" 的語法依序列出資料。

Vue 部分 data 內容

var menu = [
  {type: "主廚的話", title: "餐點簡介與相關說明", link: "javascript:;"},
  {type: "餐具擺盤", title: "VS Code 與套裝工具", link: "javascript:;"},
]

data: {
    menu: menu
},

HTML 部分

<div class="menu">
  <div class="menuItem" v-for="item in menu">
    <span class="number">{{ index+1 }}</span>
    <span class="type">{{ item.min }}</span>
    <a href="#" class="title">{{ item.title }}</a>
  </div>
</div>

取得使用者輸入資料

1. 設定一個 input 變數管理輸入的內容，並透過 v-model 連結 HTML 畫面上的輸入欄位。

Vue 部分 data 內容

var input = {
    type: "主廚的話",
    title: ""
}

data: {
   input:input
},

HTML 畫面

<div class="input">
  <select v-model="input.type">
    <option>主廚的話</option>
    <option>餐具擺盤</option>
    <option>開胃餐點</option>
  </select>
  
  <input
    type="text"
    v-model.trim="input.title"   // 用 trim 可以去掉首尾空白
    @keyup.enter="inputHandler"  // 按下 Enter 後觸發事件
  />
</div>

2. 使用者在表單中輸入內容，Enter 鍵 keyup 時，會觸發 methods 裡面的事件，將表單內容推到 menu 之中。

inputHandler: function(){
    if(this.input.title){
        this.menu.push({
            type: this.input.type,
            title: this.input.title,
            link: "javascript:;"
        })
    }
}