Jenssen Jenssen - 1 year ago 252
Javascript Question

Vue.js sync input field

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download