Vue.js sync input field

Question

In my vue application I've got lots and lots of input fields (example):

<div class="field">
    <label for="name" class="label">Naam</label>

    <div class="control">
        <input id="name"
               name="name"
               type="text"
               v-model="relation.name"
               class="input"
               :class="{ 'is-danger': errorsHas('name') }"
               autofocus>

        <p class="help is-danger" v-if="errorsHas('name')">{{ error('name') }}</p>
    </div>
</div>

So I would like to wrap this in a input component. But since vue 1 the .sync method is gone so how would I do this? Firing events is not realy a solution I guess. Just wondering how to solve this?

I would like to have something like this:

<custom-input v-model=relation.name></custom-input>

And everything else (class name, autofocus etc...) must be handled in that component.

Is this possible?

tony19 · Accepted Answer · 2022-07-15 20:21:15Z

10

Sync modifier was reintroduced in 2.3.0+, see Vue Js Docs.

In 2.3.0+ we re-introduced the .sync modifier for props, but this time it is just syntax sugar that automatically expands into an additional v-on listener:

The following <comp :foo.sync="bar"></comp> is expanded into:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

For the child component to update foo‘s value, it needs to explicitly emit an event instead of mutating the prop:

this.$emit('update:foo', newValue)

You may see this fiddle as an example.

edited Jul 15, 2022 at 20:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 26, 2017 at 12:52

enriqg9

1,5071 gold badge22 silver badges42 bronze badges

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

7 Comments

Jenssen Over a year ago

Just what I need! But when and where would I fire: this.$emit('update:foo', newValue) ?

enriqg9 Over a year ago

@Jenssen In your example what is the property you are trying to update?

Jenssen Over a year ago

I'm trying to update relation.name in a parent component.

enriqg9 Over a year ago

@Jenssen You can do <custom-input :relationName.sync="name"></custom-input>, define relationName as a prop in your component, and then on your method where you update this.relationName = newVal just trigger this.$emit('update:relationName', newValue)

Roy J Over a year ago

@Jenssen I've expanded @enriqg9's fiddle to demonstrate how you can use sync to a component with an input. The component can use a settable computed to handle the event emits, and the input can use v-model with that computed.

|

tony19 · Accepted Answer · 2022-07-16 03:23:31Z

0

You may use props to be more specific dynamic props.

Just set up a appropriate component which accepts a prop and reference to that prop in your components v-model.

Your component could look like this (adjusted example from official site):

Vue.component('custom-input', {
  // declare the props
  props: ['message'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: '<input v-model="message">'
})

While your parent would use it like that:

<custom-input :message="parentMsg"></custom-input>

edited Jul 16, 2022 at 3:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 26, 2017 at 12:41

Aer0

3,91720 silver badges35 bronze badges

1 Comment

Jenssen Over a year ago

thanks. But then I get:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

Collectives™ on Stack Overflow

Vue.js sync input field

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related