Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue.js v-model vs. v-bind.sync

Vue.js: v-model vs. v-bind:<propname>.sync

These examples use the expression foo as the data source in the parent.

Prop name Event name
v-model="foo" value by default input by default
v-bind:<propname>.sync="foo" arbitrary update:<propname>

v-model

<comp v-model="foo"></comp><comp :value="foo" @input="v => foo = v"></comp>

this.$emit('input', new_value)

v-bind.sync

<comp :bar.sync="foo"></comp><comp :bar="foo" @update:bar="v => foo = v"></comp>

this.$emit('update:bar', new_value)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment