I've been utilizing a UI component from
My intention is to develop a reusable component for vue-tags-input, and here is the code I am currently working on:
components/UI/BaseInputTag.vue
<template>
<b-form-group :label="label">
<no-ssr>
<vue-tags-input
:value="tags"
@tags-changed="updateValue"/>
</no-ssr>
</b-form-group>
</template>
<script>
export default {
name: 'BaseInputTag',
props: {
label: { type: String, required: true },
value: { type: [String, Number, Array] },
tags: { type: [Array] }
},
methods: {
updateValue(newTags) {
this.$emit('input', newTags);
}
}
}
</script>
Furthermore, in my parent vue page. I'm incorporating the above component with the following code:
pages/users/new.vue
<BaseInputTag v-model="tag" :tags="interests" label="Interests"/>
<script>
export default {
name: 'InsiderForm',
data() {
return {
tag: '',
interests: []
};
}
}
</script>
How would it be possible for me to emit the child component's newTags back to the parent's data as interests