Encountered a bug while transferring data using eventbus. What I attempted to do was pass the data from 'Quoteinput.vue' to 'Quotebar.vue' in order to update the progress bar length based on the data length present in 'Quoteinput.vue'.
This task was successfully accomplished by implementing two functions within 'Quoteinput.vue'.
One function is for pushing data to the array.
The other function is specifically for the eventbus.
Refer to the code snippet below.
=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)
// Progress bus retrieves the quote data here and passes it to Quotebar
},
addprogress(){
ProgressBus.$emit('quotedata',this.quote)
}
}
}
However, this wasn't part of my initial plan. I attempted to combine progressbus and pushing the array into one function which is 'addingmessage()'. Like shown below.
methods:{
addingmessage(){
this.quote.push(this.message)
ProgressBus.$emit('quotedata',this.quote)
}
Why did this error occur? And how can I resolve it?
Below is the code responsible for rendering the progress bar.
=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>
For better understanding, a simple diagram depicting the structure has been provided. https://i.sstatic.net/1YDpy.jpg