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?

user900362 · Accepted Answer · 2016-08-12 00:53:44Z

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/

answered Aug 12, 2016 at 0:53

user900362

Sign up to request clarification or add additional context in comments.

2 Comments

Ozzy Over a year ago

If you edit the text in the 123 input, the text to the left of the input does not update. If you edit the text in the Hello input, the text to the left does update. I want the 123 next to the input of the component to be bound to the input value. thats whats not working, even in your example

Ozzy Over a year ago

Changing :value to v-model worked for me. I dont know why I didnt try that, the documentation made no mention of it. Thanks :)

crabbly · Accepted Answer · 2016-08-12 03:29:01Z

1

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/

answered Aug 12, 2016 at 3:29

crabbly

5,2261 gold badge26 silver badges48 bronze badges

Collectives™ on Stack Overflow

VueJS Component Input Sync

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related