Vue -EventBus работает только тогда, когда он имеет выделенную функцию для себя? - PullRequest
Новая
       65

Vue -EventBus работает только тогда, когда он имеет выделенную функцию для себя?

0 голосов
/ 22 апреля 2020

Я столкнулся с ошибкой при передаче данных с использованием eventbus. Я попытался передать данные из «Quoteinput. vue» в «Quotebar. vue», чтобы обновить длину индикатора выполнения в зависимости от длины данных в «Quoteinput. vue».

Это было успешно сделано, когда я установил две функции в 'Quoteinput. vue'.


Одна из них предназначена для отправки данных в массив.
Другой предназначен только для шины событий.

См. Код ниже.

= Quoteinput. vue = 


<template>
  <div>
      <!-- <div class='input-group' style='position:relative'> -->
          <div class='input-group-prepend'>
              <span class = 'input-group-text'> Type your Quote</span>
          </div>


          <textarea class ='form-control' aria-label='with textarea' v-model="message"></textarea><hr><hr>
          <button class="btn btn-primary" @click='addingmessage'>submit my quote</button>
          <button class="btn btn-primary" @click='addprogress'>progresscheck</button>

          <textbox class='messagebox' v-for='value in quote' :typedquote ='value'></textbox>

          <!-- v model 이랑 v-for를 통해서 추가하면 되겠구만 -->
          <!-- Text box showing -->

  </div>
</template>

<script>
import textbox from './quotebox.vue'
import {ProgressBus} from '../../main.js'

export default {

    data(){
        return {
            quote:[],
            message:'',
        }
    },
    components:{
        textbox
    },
    methods:{
        addingmessage(){
            this.quote.push(this.message)

            // 프로그레스 버스가 여기서 쿠오트 데이터를 물어가지고, 쿠오트바로 가져가야한다.
        },
        addprogress(){
            ProgressBus.$emit('quotedata',this.quote)

        }
    }

}

Однако это был не мой оригинальный план. Я попытался поместить prgressbus и выдвинуть массив в одну функцию, которая добавляет message (). как показано ниже. 

methods:{
    addingmessage(){
        this.quote.push(this.message)
        ProgressBus.$emit('quotedata',this.quote)


    }

Почему произошла эта ошибка? и что я должен сделать, чтобы это исправить?

Код, который на самом деле dr aws индикатор выполнения, как показано ниже.



= Quotebar.vue = 

<template>


<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" :style="{width:10*completion+'%'}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

</template>

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

export default {

    created(){
        ProgressBus.$on('quotedata',(value)=>{
            this.completion= value.length 
        })
    },

    data(){
        return{
            completion: 0
        }
    }



}
</script>

<style scoped>


</style>

Для вашего понимания я прилагаю простую диаграмму для структуры , enter image description here

1 Ответ

0 голосов
/ 22 апреля 2020

Мне интересно, что за сообщение об ошибке. Я думаю, что вы могли бы асинхронно / ждать функции для работы последовательно. 

methods:{
    async addingmessage() {
        await this.quote.push(this.message);
        await ProgressBus.$emit('quotedata',this.quote);
    }
}
...