VueJS分量輸入同步

我想創建具有雙向綁定到組件的本地範圍的輸入的組件。VueJS分量輸入同步

沒有組件，我會創建一個新的Vue實例，然後將我的data設置爲我所需要的。然後使用v-model，將輸入綁定到該數據，並且可以從輸入中對其進行處理。

但是，將相同的代碼轉換爲組件，我無法在組件中獲取任何輸入以綁定到其數據。我嘗試過道具，:data.sync,data屬性，但無論我嘗試過什麼，組件內的輸入都不起作用。

我創建了一個的jsfiddle來說明這一點：

https://fiddle.jshell.net/f0pdmLhy/2/

我想發生在組件雙向綁定到ERR變量輸入，就像非組件版本下方。

我該如何做到這一點？

我基本上想創建組件，我可以用ajax數據實例化，然後填充輸入。然後輸入可以更新數據，我可以使用保存方法將數據發送到服務器。這甚至可以使用組件完成？

來源

2016-08-11 Ozzy

因此，有幾件事情：

你正在使用的外部資源在某種程度上故障。我用 jsfiddle默認Vue實例，它工作正常。
當你聲明一個組件時，你不應該把數據定義爲一個對象，而是作爲一個函數返回一個對象。在這裏閱讀：https://vuejs.org/guide/components.html#Component-Option-Caveats

工作示例這裏：https://fiddle.jshell.net/by4csn1b/1/

來源

2016-08-12 00:53:44

如果您編輯在123輸入文本，文本輸入左邊不更新。如果編輯Hello輸入中的文本，則左側的文本會更新。我希望組件輸入旁邊的123被綁定到輸入值。多數民衆贊成什麼不起作用，即使在你的例子 – Ozzy

只需更改'：價值'爲'V模型'：https://fiddle.jshell.net/by4csn1b/2/ –

它是否適合你？ –

是的，有分量，反應可就像用一個實例來完成。

一個捕獲組件，是data必須是一個返回對象的函數。

此外，要保持雙向綁定，請在輸入中使用v-model。

Vue.component('ii', { 
    template: '<span>{{err}}</span><input type="text" v-model="err"><hr>', 
    data: function() { 
    return { 
     err: 123 
    } 
    } 
})

小提琴：https://fiddle.jshell.net/f0pdmLhy/25/

來源

2016-08-12 03:29:01 crabbly

VueJS分量輸入同步

回答

相關問題