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分量输入同步

回答

相关问题