一 雙向綁定報(bào)錯(cuò)：Maximum call stack size exceeded

最近在小程序的開(kāi)發(fā)過(guò)程中，遇到一個(gè)需求，需要綁定一個(gè)list到自定義表單組件，組件根據(jù)列表渲染表單，表單的值需要和父組件雙向綁定。
但是這里卻出現(xiàn)了問(wèn)題，本人先使用vue的方式將list直接做整體綁定。

<k-input-group2 model:input_list="{{input_group_list}}" />

	... ...
    data: {
        input_group_list: [{
                type: "input",
                label: "名稱(chēng)"
                placeholder: "",
                disabled: false,
                value: "1"
            },{
                type: "input",
                label: "地址",
                placeholder: "",
                disabled: false,
                value: ""
            }]
    }
    ... ...

結(jié)果在子組件內(nèi)部使用setData對(duì)list的屬性做出變更時(shí)直接報(bào)錯(cuò)棧溢出。

<input class="weui-input" bindinput="bindChange" value="{{item.value}}" data-index="{{index}}" />

	... ...
    methods: {
        bindChange: function ( e:any ) {
            console.log('改變，攜帶值為', e.detail.value)
            let index = e.currentTarget.dataset.index
            this.setData({
              [`input_list[${index}].value`]: e.detail.value
            })
        }
    }
    ... ...

這里運(yùn)行時(shí)報(bào)錯(cuò)：Maximum call stack size exceeded。
而使用"a.b"的路徑方式綁定也是不行的，首先不符合需求，其次官方文檔上也寫(xiě)明微信小程序目前為止只是支持簡(jiǎn)單對(duì)象的雙向綁定，只支持單一字段的綁定，表達(dá)式、路徑和對(duì)象等都不支持。。

二 實(shí)現(xiàn)微信小程序復(fù)雜對(duì)象的雙向綁定

于是考慮將list轉(zhuǎn)為json串做雙向綁定的載體。
首先將list定義為json串。

Page({
    data: {
        input_group_list: "[]"
    },
    onLoad() {
        this.setData({
            input_group_list: JSON.stringify([{
                type: "input",
                label: "名稱(chēng)",
                placeholder: "",
                disabled: false,
                value: "1"
            },{
                type: "input",
                label: "地址",
                placeholder: "",
                disabled: false,
                value: ""
            }])
        })
    }
}

該字符串傳入子組件。

<k-input-group model:input_list="{{input_group_list}}" />

在子組件中接到該數(shù)據(jù)，并做一個(gè)映射，方便使用。

	... ...
    properties: {
        input_list: {
            type: String,
            defalut: "[]"
        }
    }
    data: {
        input_list_local: []
    },
    observers: {
        'input_list': function(input_list) {
            this.setData({
                input_list_local: JSON.parse(input_list)
            })
        }
    }
	... ...

在子組件中，在input值改變時(shí)，更新list的值。

	... ...
    methods: {
        bindChange: function ( e:any ) {
            console.log('改變，攜帶值為', e.detail.value)
            let index = e.currentTarget.dataset.index
            this.data.input_list_local[index].value = e.detail.value
            let input_list_local = JSON.stringify(this.data.input_list_local)
            this.setData({
              input_list: input_list_local
            })
        }
    }
    ... ...

現(xiàn)在在父組件打印list的值，發(fā)現(xiàn)當(dāng)子組件表單變化的時(shí)候，父組件也改變了。

如果這篇文章對(duì)您有幫助，請(qǐng)點(diǎn)個(gè)贊給博主一點(diǎn)鼓勵(lì)。
如果您讀完本文有未解決的疑惑，可以在下方評(píng)論和博主一起解決。
如果您對(duì)博主感興趣，可以關(guān)注博主一起成長(zhǎng)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-492502.html

到了這里，關(guān)于微信小程序復(fù)雜對(duì)象的雙向綁定(附代碼可直接使用)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！