0

I'm having trouble passing text data from a custom component to the main component. This custom component is text area and I want to store the text the into my database. I tried to use Prop annotation but it didn't work. When I console.log(this.text) I don't see any text data. I may doing this wrong so if anyone could help me out, that would be awesome!

My main component

<template>
  <div>
   <textarea-component></textarea-component>
   <button @click="save()"></button>
  <div>
</template>
<script lang=ts>
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import api from '@/infrastructure/api/noteApi';
  @Component({
     components: {
      'textarea-component': TextAreaComponent, 
     },
   })
  export default class MainPage extends Vue {
     @Prop
     text!: string;

     private async save() {
       //check if the data is passing 
       console.log(this.text)
       
       //save to the database
       await api.saveText(string)
        .then((Response) => {
        console.log(Response)
       });
  }
  }
</script>

<template> 
   <div>
     <textarea v-bind:value="text">
     </textarea>
   </div>
</template>
<script lang=ts>
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class TextAreaComponent extends Vue {
     text:string = '';
  }
</script>
Leo Nakamura
  • 39
  • 3
  • Props have to be passed down from parent to child, you're passing it up. To pass data from child to parent you need to [emit a custom event](https://vuejs.org/v2/guide/components-custom-events.html) – Daniel_Knights Feb 02 '21 at 14:19
  • Agreeing with the previous comments, additionally I recommend moving the 'save' button to the child 'textarea' component. Then use this button's click handler to emit the custom event to the parent. The event handler in the parent could then do your actual save. – Tim Feb 02 '21 at 16:40

0 Answers0