Vue JS custom component v-model

Question

Hello everyone i have a bit of a problem trying to get v-model to work on a custom component i've created. The problem is that this component consists of two inputs, and each time these are changed i emit the "input" event and bind it to an array i have on the parent.

<key-value-input v-for="n in inputs" v-model="provider.params"></key-value-input>

Then in the Component itself...

        updateData() {
            this.$emit('input', {
                key: this.inputData.key,
                value: this.inputData.value
            })
        }

This kinda works the problem is that it replaces provider.params from the original empty array into an object containing only one of the several key-value combinations i might have since this component can be duplicated at runtime...

So the question is, how do i make it so that v-model can fetch the data from each sub-component and simply set it as objects in an array on the parent?

craig_h · Accepted Answer · 2017-06-06 11:22:25Z

0

If I understand you correctly, you can simply use v-model on the array element itself:

<key-value-input v-for="n in inputs" v-model="provider.params[n-1]"></key-value-input>

Here's the JSFiddle: https://jsfiddle.net/2be4maxm/

answered Jun 6, 2017 at 11:22

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

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

2 Comments

Roy J Over a year ago

:value would be more appropriate than v-model="inputData.key" in your component template, since you have a separate handler to issue the emits. This updated fiddle shows how you could use v-model.

craig_h Over a year ago

@RoyJ Ah yes of course, it was just a quick mock up based on the description, pieced together in a bit of an ad-hoc manner, but yes, :value would be better. ;)

Collectives™ on Stack Overflow

Vue JS custom component v-model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related