# Day04 新增列表資料

###### tags: `Vue`

<style>

.red{
color:red
}
</style>

我們要做一個把所以資料渲染出來列表,並且可以再自行使用input新增。


先將html版面切好後,item 元件只要保留一個做為綁定vue使用,其餘靠
vue渲染出來。

### data準備

 let data = {


  menu: [
   { type: '觀念理解', title: 'Day 01 jQuery vs Vue ', link: 'javascript:;' },
   { type: '表單功能', title: 'Day 02  Vue slider ', link: 'javascript:;' },
                .
                .
                .
                ]

 let app = new Vue({
            el: '#app',
            data: data,

        })

### html 模板綁定

#### 資料迴圈render
多筆資料render我們使用<kbd>v-for="item in data"</kbd>，在我們的範例裡面為<kbd>v-for="item in menu"</kbd>，因為我們要渲染資料有編號 ,而<kbd>v-for=""</kbd>可以是<kbd>(item ,Xnumber) in data</kbd>,
我們範例使用<kbd>v-for="(item , index) in menu"</kbd>

#### 資料編號render綁定
因為在html模板最外層我們已經包了<kbd>v-for="(item , index) in menu"</kbd>,在編號子曾綁上<kbd>{{index + 1}}</kbd>,index第一個是0,所以所有都要+1

#### catalog分類綁定
<kbd>{{item.type}}</kbd>

#### 課程標題綁定
<kbd>{{item.title}}</kbd>

   <div class="row datalist ml-0 mt-5 ">
                <div class="col-55  libg mx-2 my-3 vue-list d-flex" v-for="(item , index) in menu" >
                    <div class="nolist ml-n2 pt-2 pl-2">{{index + 1}}</div>
                    <div class="catolog ml-n1 pt-2">{{item.type}}</div>
                    <a class="pl-2 letter-sp-1 text-decoration-none dark-g vue-title pt-2" 
      target="vue-iron ">{{item.title}}</a>

   </div>

 </div>

### 綁定select & input 的資料綁定data

到Js data部分處理 , 我們這裡給他在資料庫名字input

 let data = {

            input: {
                    type:'全部',
                    title:''
            },

}

#### select綁定data
<kbd> v-model="input.type"</kbd>
注意,在data裡面如果type是空值

渲染出來選單,上方顯示會是白色沒有任何文字


#### input綁定data

以此類推input是<kbd>v-model="input.title"</kbd>
而通常,input輸入文字要小心頭尾空白,所以直接在<kbd>v-model</kbd>後面加<kbd>.trim</kbd>

`v-model.trim="input.title"`

### 綁定input enter事件 - input type輸入文字按下enter畫面新增資料

<p class='red'>
注意:包住下拉選單和input type不得回 <kbd><form></form></kbd> ,
否則畫面渲染不出來
</p>

到input去使用<kbd>@keyup.enter=""</kbd>新增一個enter監聽function事件
`@keyup.enter="inpuHandler"`

到js的new Vue 新增一個<kbd>methods</kbd>,進行function撰寫 .

let vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                inpuHandler() {
                    if (this.input.title) {
                        this.menu.push({
                            type: this.input.type,
                            title: this.input.title,
                            link: 'javascript:;'

                        })

                        this.input.title = ''
                    }

                }
            }

        })

按下enter後 , 如果 this.input.title 則 this.menu push資料 , 依造menu資料type、title、link寫資料push 。最後記得要把輸入框裡面this.input.title資料清空 ,不然按enter送出後 ,文字還會存在input輸入框裡

[Day04 新增列表資料原始碼參考](https://jsfiddle.net/Harrmonia/bc1rhkwn/2/)

*參考網路資訊*
[[ Vue.js 手牽手，一起嗑光全家桶 ] 開胃餐點 - 使用者輸入焗列表呈現](https://www.youtube.com/watch?v=_Mx_YW8Nd3A&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=6)

*講師個人頻道資料很豐富,情況允許大家多多看完影片廣告,和每個月訂閱扣款donate,當做請講師喝杯咖啡犒賞辛苦無私