解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問題
我就廢話不多說了,大家還是直接看代碼吧~
<input type="text" maxlength="11" placeholder="請(qǐng)輸入聯(lián)系人電話" v-model="form.phone" />
這樣的輸入框,綁定的是data中的form對(duì)象上的phone字段。
在mounted鉤子函數(shù)里邊寫:
this.form.phone = '1888888888';
這樣在頁(yè)面上時(shí)候不會(huì)隨著輸入框值改變而改變。
解決方法如下:
this.$set(this.form,"phone",this.$route.query.mobile)
或者綁定到data里邊的一個(gè)字符串,也是可以解決的
補(bǔ)充知識(shí):vue模塊自動(dòng)化腳本編譯失敗module not found
vue的for循環(huán)改了key值出現(xiàn)了這樣的問題。
開始的寫法(沒出問題)
<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.可以把代碼回退到原來 的,只有控制臺(tái)waring,兩個(gè)循環(huán)都是以index為key,并不影響正常的編譯和運(yùn)行。
找到了真正的原因:
v-for="(bb) in cc.content"這種寫法的問題。
刪掉了index那么也不需要括號(hào)了。
改成v-for="bb in cc.content"就好了。
以上這篇解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何理解Vue簡(jiǎn)單狀態(tài)管理之store模式
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理,vue應(yīng)用程序的各組件之間經(jīng)常需要進(jìn)行通信,除了v-on、EventBus等通信方式外,可以采用數(shù)據(jù)共享的方式進(jìn)行通信。這種簡(jiǎn)單的數(shù)據(jù)共享模式就是store模式。2021-05-05VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)完整示例
這篇文章主要給大家介紹了關(guān)于vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)的相關(guān)資料,雖然很多時(shí)候后端會(huì)把分頁(yè),搜索,排序都做好,但是有些返回?cái)?shù)據(jù)并不多的頁(yè)面,或者其他原因不能后端分頁(yè)的通常會(huì)前端處理,需要的朋友可以參考下2023-08-08Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法
這篇文章主要介紹了Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)
這篇文章主要介紹了vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器),詳細(xì)的介紹了各種過濾器的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度
這篇文章主要介紹了詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07