试图从总线 vuejs 发出结果

Question

我正在尝试发出引号的结果数，其中我加一并将文本的结果从文本区域推送到数组。字符串文本成功推送到数组，但引号数始终为零。我已经用一种方法尝试过或分开了，但我总是得到相同的结果。

<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>

当我从 click 和方法中删除 addQuote 时，numberOfQuotes 变大了一个，我在另一个组件中显示它没有问题。

Answer 1

在 click 指令上调用单个方法是一种很好的做法，因此而不是：

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

你可以实施

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

和方法部分

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

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

我以前遇到过这个问题，希望这个解决方案能有所帮助。

编辑：

抱歉，错过了一些上下文，因为你正在尝试推送到 this.quotes 这是一个道具，你不能直接改变它，你应该使用 getter 和 setter 来做它甚至更好，使用 v-model。引用文档：

避免直接修改 prop，因为只要父组件re-renders，该值就会被覆盖。相反，使用数据或根据道具的价值计算属性。 Prop 被改变：“可见”（在组件中找到）

试图从总线 vuejs 发出结果

Trying to emit result from bus vuejs

javascript

vue.js

emit