iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 13
0

今天就來做聊天室最重要的功能-輸入訊息

就讓我們來到pages > index.vue找之前塞好的input

<div class="msg_input">
  user:project $
  <input type="text" />
</div>

要綁定一個資料要先在vue裡面意義變數

data(){
    return{
        memberName: ''
    }
}

基本上只要是表單系列的項目要綁定變數都要用雙向綁定v-model,如果只用單向綁定v-bind的話,在input裡新打的字不會更新回data,可以自己開vue tool試試效果

簡單想的話就是v-bind在純顯示用,需要被使用者更新的資料就要v-model

input改成以下,綁上了memberName這筆資料

<input type="text" v-model="memberName" />

在dev tool裡可以看到,輸入的資料會直接更新在data裡

https://ithelp.ithome.com.tw/upload/images/20190929/20111962zkwBqzImNo.png


上一篇
十二號坑,將常用功能弄成Nuxt Plugin直接使用
下一篇
十四號坑,Enter送出訊息-鍵盤事件
系列文
每日挖個坑,用坑填起耍廢聊天室!30

尚未有邦友留言

立即登入留言