VueJS Component Input Sync

Question

I want to create components which have input which two-way bind to the local scope of the component.

Without a component, I would create a new Vue instance and then set my data to what I need. Then using v-model, bind an input to that data and it can be manipulated from the input.

However, converting the same code to a component, I cannot for the life of me get any input in a component to bind to its data. I have tried props, :data.sync, data attributes but no matter what I have tried, the input within a component does nothing.

I have created a JSFiddle to illustrate this:

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

What I would like to happen is the input in the component to two way bind to the err variable, just like the non component version underneath.

How would I accomplish this?

I basically want to create components that I can instansiate with ajax data and then populate the inputs. The inputs could then update the data and I can use a save method to send the data to the server. Can this even be done using components?

Answer 1

So there are a couple of things:

• The external resource you were using was somehow faulty. I've used jsfiddle default Vue instance and it works fine.
• When you declare a component, you should not define the data as an object, but as a function returning an object. Read here: https://vuejs.org/guide/components.html#Component-Option-Caveats

A working example here: https://fiddle.jshell.net/by4csn1b/1/