Last active
February 17, 2021 14:03
-
-
Save reinink/46bc4d895c2089db92ea37445dc35386 to your computer and use it in GitHub Desktop.
Multiple v-models in Vue 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<input type="text" :value="address" @input="$emit('update:address', $event.target.value)"> | |
<input type="text" :value="city" @input="$emit('update:city', $event.target.value)"> | |
<input type="text" :value="region" @input="$emit('update:region', $event.target.value)"> | |
<input type="text" :value="country" @input="$emit('update:country', $event.target.value)"> | |
<input type="text" :value="postal" @input="$emit('update:postal', $event.target.value)"> | |
</template> | |
<script setup> | |
import { defineProps } from 'vue' | |
defineProps({ | |
address: String, | |
city: String, | |
country: String, | |
region: String, | |
postal: String, | |
}) | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<label>Address:</label> | |
<AddressInput | |
v-model:address="form.address" | |
v-model:city="form.city" | |
v-model:region="form.region" | |
v-model:country="form.country" | |
v-model:postal="form.postal" | |
/> | |
<div>Your address is:</div> | |
<address> | |
{{ form.address }}<br> | |
{{ form.city }}, {{ form.region }}<br> | |
{{ form.country }} {{ form.postal }} | |
</address> | |
</template> | |
<script setup> | |
import { reactive } from 'vue' | |
import AddressInput from './components/AddressInput.vue' | |
const form = reactive({ | |
address: '123 Example Drive', | |
city: 'Toronto', | |
region: 'Ontario', | |
country: 'Canada', | |
postal: 'A0B 1C2', | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment