1. 程式人生 > 程式設計 >解決vue專案input輸入框雙向繫結資料不實時生效問題

解決vue專案input輸入框雙向繫結資料不實時生效問題

我就廢話不多說了,大家還是直接看程式碼吧~

<input type="text" maxlength="11" placeholder="請輸入聯絡人電話" v-model="form.phone" />

這樣的輸入框,繫結的是data中的form物件上的phone欄位。

在mounted鉤子函式裡邊寫:

this.form.phone = '1888888888';

這樣在頁面上時候不會隨著輸入框值改變而改變。

解決方法如下:

this.$set(this.form,"phone",this.$route.query.mobile)

或者繫結到data裡邊的一個字串,也是可以解決的

補充知識:vue模組自動化指令碼編譯失敗module not found

vue的for迴圈改了key值出現了這樣的問題。

開始的寫法(沒出問題)

<div v-for="(item,index) in infos.visitStockReport" :key="index">

(出問題的寫法)

<div v-for="(item) in infos.visitStockReport" :key="item.id">

開始的寫法(沒出問題)

<div class="record-info" v-for="(bb,index2) in cc.content" :key="index2">

(出問題的寫法)

<div class="record-info" v-for="(bb) in cc.content" :key="bb.contentName">

解決方法:

1.可以把程式碼回退到原來 的,只有控制檯waring,兩個迴圈都是以index為key,並不影響正常的編譯和執行。

找到了真正的原因:

v-for="(bb) in cc.content"這種寫法的問題。

刪掉了index那麼也不需要括號了。

改成v-for="bb in cc.content"就好了。

以上這篇解決vue專案input輸入框雙向繫結資料不實時生效問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。