Skip to content

Instantly share code, notes, and snippets.

@mattmaribojoc

mattmaribojoc/CustomInput.vue

Created July 14, 2021 15:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattmaribojoc/a02bd6bf325b7f961b68ea07bb99b856 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattmaribojoc/a02bd6bf325b7f961b68ea07bb99b856 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mattmaribojoc created this gist Jul 14, 2021.
    30 changes: 30 additions & 0 deletions CustomInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <template>
    <div>
    <input
    type="text"
    :value="data"
    @input="update"
    />
    </div>
    </template>

    <script>
    import { useVModel } from '@vueuse/core'
    export default {
    props: ['data'],
    setup(props, { emit }) {
    const data = useVModel(props, 'data', emit)
    console.log(data.value) // equal to props.data
    data.value = 'name' // equal to emit('update:data', 'name')
    const update = (event) => {
    data.value = event.target.value
    }
    return {
    data,
    update
    }
    },
    }
    </script>