form表單資料回顯雙向繫結失效的原因

2022-08-22 12:03:14 字數 634 閱讀 7980

最近看vue原始碼分析類的文章,斷斷續續的看著,時不時發現一些以前沒注意的一些點。

正好前段時間寫專案時突然發現有時候用element-ui的表單時,在乙個彈框裡,資料回顯,最開始表單繫結的物件是空物件,然後我直接給表單的資料指定了哪些字段賦值,然後在修改表單內容時,發現怎麼輸入不進去呢,像是雙向繫結失效了。型別下面這種寫法

1 export default5}

6},7methods:

11 }

當時沒多想,直接給最開始的空物件裡新增了那幾個要顯示的字段,然後再賦值,就可以正常輸入了,即可以實現雙向繫結了。

當時不明白什麼原因,還以為是element的bug,今天看vue原始碼解析的文章時,作者的一句話讓我想明白了出現上述問題的原因:對於使用object.defineproperty實現響應式的物件,當我們去給這個物件新增乙個新的屬性的時候,是不能夠觸發它的 setter 的。

一開始我的表單儲存的物件是空物件,然後我指定給物件裡的屬性的時候,這些屬性是之前沒有的,所以就不能觸發setter。所以才有了$set這個方法,通過$set可以新增乙個響應式的屬性,就可以實現雙向繫結了。

以前沒有注意到這個問題,現在明白了,總算是知其所以然了

雙向繫結表單資料

一.核取方塊 checkednames為選中的核取方塊的value的值,陣列值按照核取方塊選中順序排列 多個核取方塊繫結到陣列 for jack jack for john john for mike mike checked names newvue 二.單選按鈕 picked輸出值為選中的單選按...

Ext 表單資料回顯問題

在ext的開發過程中,有時資料回顯成了困擾寡人的大問題,別的都好說,尤其是combo的回顯真的很是無語 最近找了乙個不錯的方法,給大家分享一二 原理1.訪問後台 獲取資料 2.成功獲取後進行資料回填 前台寫法如下 form.getform load method post failure funct...

JQuery獲取form表單資料

1.首先頁面的form的所有表單元素需要增加name屬性 資料來源名稱 資料庫型別 mysql oracle 2.獲取表單資料的方式一 let json adddatasourceform serialize console.log json json 輸出 name asd type 13.獲取表...