Skip to content

Instantly share code, notes, and snippets.

@LinusBorg
Last active Jun 24, 2019
Embed
What would you like to do?
Consuming function-based plugin in object-based Vue component
<template>
<form>
<input type="text" v-model="data.name" />
<span v-if="errors.name">{errors.name.msg{</span>
<span v-else>{{capsName}}</span>
<input type="number" v-model.number="data.age" />
<span v-if="errors.age">{errors.age.msg{</span>
</form>
</template>
<script>
import useValidation from '@unknown/vue-use-validation'
import { state } from 'vue'
export default {
name: 'MyFormComponent',
setup() {
// we need to initialize state in setup instead of data()
const data = state({
name: 'Tom',
age: 13,
})
// we initialize the plugin.
// there's no need for the end user to understand any of the
// new API that is used internally (watch(), computed(), whatever)
const errors = useValidation(data)
// we return the new data and the error messages object that's essentially the result
// of a computed prop
// (but again, for the user that's an implementation detail they don't have to know.
return {
data,
errors,
}
},
mounted() {
// do your ususal stuff
},
// you can access the data from 'setup'
// and work with it like you're used to.
// similarly, you can use `methods` and
// `watch` for this data as well etc.
computed: {
capsName() {
return this.data.name.toUperCase()
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment