I recently built a form component called Form.vue that is nested within PostPage.vue. In the 'Form.vue' component, I am trying to trigger a $emit event to notify the parent component and update a Prop value called btn-text.
Parent Component PostPage.vue:
<template>
<div id="post-page">
<div class="header-text pt-5 text-center">
<div class="h2 font-weight-bold">
Welcome to the DevTribe Community
</div>
<div class="h5 font-weight-bold">
Ask questions, share content, introduce yourself. Be nice!
</div>
</div>
<Form />
<!-- textarea-not-clear isn't catched here below -->
<Posts
:btn-text="btnText"
@textarea-not-clear="changeBtnText()"
/>
</div>
</template>
<script>
import Form from './PostPage/Form.vue';
import Posts from './PostPage/Posts.vue';
export default {
name: 'PostPage',
components: {
Form,
Posts
},
data() {
return {
}
},
methods: {
changeBtnText() {
console.log('tss');
}
}
}
</script>
<style lang="scss" scoped>
#post-page {
background-color: #ffffff;
height: 100%;
padding: 0 20%;
}
</style>
The emit will be triggered within a watch function when the textarea is empty
Child Component Form.vue:
<template>
<div id="form">
<form class="text-area text-center mt-5 mx-auto w-100">
<div class="row">
<div class="col-12">
<textarea
v-model="textarea"
name="post-text"
rows="6"
class="w-100"
placeholder="Create a post..."
/>
</div>
<div class="col text-left">
<button
type="button"
class="btn btn-outline-primary"
>
Send
</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Form',
data() {
return {
textarea: ''
}
},
watch: {
textarea: function() {
if (this.textarea !== '') {
this.$emit('textarea-not-clear', 'Join Discussion');
}
}
}
}
</script>
<style lang="scss" scoped>
.text-area {
height: 300px;
textarea {
border: solid black 1px;
}
button {
width: 120px;
}
}
</style>
Although the Vue DevTool extension shows the event being triggered: https://i.sstatic.net/MTZhC.jpg
it seems that the event is not being caught properly, as the changeBtnText() function in PostPage.vue is not firing and no console.log('test') message appears.