Trying to emit result from bus vuejs

Question

I am trying to emit result number of quotes where I add plus one and also push result of the text from textarea to array. The string text is pushed to array successfully but the number of quotes is always zero. I have tried it in one method or separed and I always get same result.

<template>
    <div>
       <p>Quotes</p>
        <b-form-textarea
      id="textarea-rows"
      v-model="value"
      placeholder="Enter something..."
      rows="5"
    ></b-form-textarea>
    <b-button variant="primary" @click='plusOneQuote(); addQuote();'>Add Quote</b-button>
    </div>
</template>

<script>
import {EventBus} from '../main.js'

export default {
        props: ['numberOfQuotes', 'quotes'],
        data (){
            return {
                value: '',
            }
        },
        methods: {
            plusOneQuote() {
                this.numberOfQuotes++;
                EventBus.$emit('addedQuote', this.numberOfQuotes);

            },
            addQuote() {
                this.quotes.push(this.value);
            }
        }
}
</script>

When I delete the addQuote from click and the method, then numberOfQuotes get bigger by one and I show that in another component by no problem.

Answer 1

Is a good practice to call a single method on the click directive, so instead of:

<b-button variant="primary" @click='plusOneQuote(); addQuote();'>Add Quote</b-button>here

you could implement

<b-button variant="primary" @click='updateQuotes'>Add Quote</b-button> here

And the methods section

methods: {
        plusOneQuote() {
            this.numberOfQuotes++;
            EventBus.$emit('addedQuote', this.numberOfQuotes);

        },
        addQuote() {
            this.quotes.push(this.value);
        },
        updateQuotes(){
             this.plusOneQuote();
             this.addQuote();
        }

I had this problem before and hope this solution helps.

EDIT:

Sorry, missed some context, since you are trying push to this.quotes which is a prop, you cannot directly mutate it, you should use a getter and a setter to do it or even better, use a v-model. Quoting the docs:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component )