Oskar Oskar - 16 days ago 5
Javascript Question

Vue - wrap HTML5 element

I want to create a component that wraps a

textarea
element. Its function is to add custom functionality and custom styling, but I don't want it to be scoped in its own scope - rather, the parent should be able bind to regular events like
input
.

Example of what is needed, but will not work (problem is highlighted in
parent.vue
):

area.vue:



<template>
<textarea rows="1"></textarea>
</template>

<script>
export default {
mounted() {
// do something...
}
}
</script>

<style scoped>
textarea {
height: 100%;
}
</style>


parent.vue:



<template>
<area @input="doSomething"></area>
</template>

<script>
import Area from "./area.vue"

export default {
methods: {
doSomething(){
// NOT TRIGGERED!
// `input` event is not passed over to parent scope
}
},
components: {
Area
}
}
</script>


I do not want to explicitly write in
this.$emit
calls into the component.

Answer

You only need to add .native to @input.

Vue's v-on/@, when used on a component (without .native), only listens to custom events declared by emit.