CODEWITHSUNDEEP
vue.jstwo-wayvue-component
Ozzy
Ozzy

Reputation: 10643

VueJS Component Input Sync

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?

Upvotes: 1

Views: 1827

Answers (2)

crabbly
crabbly

Reputation: 5186

Yes, with components, the reactivity can be accomplished just like with an instance.

One catch with components, is that data must be a function that returns an object.

Also, to maintain the two way binding, use v-model in your input.

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

Fiddle: https://fiddle.jshell.net/f0pdmLhy/25/

Upvotes: 1

user900362
user900362

Reputation:

So there are a couple of things:

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

Upvotes: 1

Related Questions