Skip to content

Instantly share code, notes, and snippets.

@blade93ny

blade93ny/AddressInput.vue

Forked from reinink/AddressInput.vue
Created February 15, 2021 11:05
Show Gist options
  • Save blade93ny/8cbd490b774ef78bafc97394a3260e06 to your computer and use it in GitHub Desktop.
Save blade93ny/8cbd490b774ef78bafc97394a3260e06 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @reinink reinink revised this gist Feb 12, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Form.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    <div>Your address is:</div>
    <address>
    {{ form.address }}<br>
    {{ form.city }}, {{ form.province }}<br>
    {{ form.city }}, {{ form.region }}<br>
    {{ form.country }} {{ form.postal }}
    </address>
    </template>
  2. @reinink reinink revised this gist Feb 12, 2021. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion AddressInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <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="country" @input="$emit('update:country', $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>

    2 changes: 1 addition & 1 deletion Form.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ import AddressInput from './components/AddressInput.vue'
    const form = reactive({
    address: '123 Example Drive',
    city: 'Toronto',
    province: 'Ontario',
    region: 'Ontario',
    country: 'Canada',
    postal: 'A0B 1C2',
    })
  3. @reinink reinink revised this gist Feb 12, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions AddressInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <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="country" @input="$emit('update:country', $event.target.value)">
    <input type="text" :value="province" @input="$emit('update:province', $event.target.value)">
    <input type="text" :value="region" @input="$emit('update:region', $event.target.value)">
    <input type="text" :value="postal" @input="$emit('update:postal', $event.target.value)">
    </template>

    @@ -13,7 +13,7 @@ defineProps({
    address: String,
    city: String,
    country: String,
    province: String,
    region: String,
    postal: String,
    })
    </script>
  4. @reinink reinink created this gist Feb 12, 2021.
    19 changes: 19 additions & 0 deletions AddressInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <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="country" @input="$emit('update:country', $event.target.value)">
    <input type="text" :value="province" @input="$emit('update:province', $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,
    province: String,
    postal: String,
    })
    </script>
    29 changes: 29 additions & 0 deletions Form.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <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.province }}<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',
    province: 'Ontario',
    country: 'Canada',
    postal: 'A0B 1C2',
    })
    </script>