鍍金池/ 問答/HTML/ v-model 綁定動態(tài)變量怎么實現(xiàn),求賜教,急急急!

v-model 綁定動態(tài)變量怎么實現(xiàn),求賜教,急急急!

clipboard.png
如圖,showColumns是一個數(shù)組,column是數(shù)組的當(dāng)前項(一個對象),column中有個屬性codeCamel,我想讓這個屬性的值作為v-model綁定的變量,因為每個對象中codeCamel對應(yīng)的值不一樣,求賜教啊,急急急!

回答
編輯回答
挽歌

codeCame是showColumns數(shù)組中的數(shù)據(jù),你可以通過修改showColumns數(shù)組來實現(xiàn)頁面重新渲染

2017年5月16日 10:13
編輯回答
筱饞貓

不是很理解你的問題在哪,直接用v-model="column. codeCamel" 不行么?
你理解一下vue是數(shù)據(jù)驅(qū)動的,
v-model綁定的是一個變量的名字,如column. codeCamel,那么 v-model的值就是所綁定的變量的值, 如username。
要理解vue需要把思想轉(zhuǎn)變過來,不是像js那樣直接操作dom,vue是有一個綁定的關(guān)系,當(dāng)數(shù)據(jù)發(fā)生變化,該節(jié)點會自動改變值

2018年5月23日 03:23
編輯回答
近義詞

重新編輯一下?;貜?fù)還回復(fù)不上了可還行。。。

第一點:雙向綁定的含義是數(shù)據(jù)實體(js中的對象或者數(shù)組)的屬性值與視圖產(chǎn)生一個雙向的對應(yīng)關(guān)系。無論是數(shù)據(jù)實體屬性值的改變,還是視圖的值(input的value,select的value等)的改變,都會有相應(yīng)的體現(xiàn)。

第二點:v-model指令,指明了當(dāng)前視圖元素應(yīng)當(dāng)與某個vue維護的數(shù)據(jù)實體中的某個屬性建立關(guān)系。v-model=‘column.codeCamel’表明了,這個input將于column這個對象中的codeCamel屬性建立關(guān)系。input的value=columen.codeCamel(這里默認(rèn)codeCamel屬性的類型與input輸入類型相同)

第三點:你提到了你想讓input的值與username(?)進行綁定。我們來討論一下數(shù)據(jù)實體的結(jié)構(gòu)。

let column = {
    ...
    codeCamel: "", // v-model=column.codeCamel
    ...
}

這種對象結(jié)構(gòu)顯然沒有你所說的username

let column = {
    ...
    codeCamel: { // v-model=column.codeCamel.username
        username: '',
        pasword: '',
        email: ''
    },
    ...
}

這種結(jié)構(gòu)又不符合“codeCamel的值可能是username,password,email中的一種”

所以具體該怎么綁定,你只要弄清楚了codeCamel到底是什么,或者說弄清楚column這個對象的定義結(jié)構(gòu)是什么,你自然就知道該怎么綁定了

2017年11月6日 00:52