div not being rendered when object is changed in Vue

Question

i have this problem where i need to render a div when object is not null but i can't figure it out why the div is not being rendered

i'm using Vue and this is my component template:

<div style="flex: 1" v-if="sessionExamObject != null">
      <br>
      <questions-panel-header :subjectName="subjectName"></questions-panel-header>
      <br>
      <div style="margin: 5px auto; width: 98%; color:white;" v-for="(question,index) in sessionExamObject.questions">
        <h3 >
          Question number {{index + 1}}
        </h3>
        <question-multi-choices v-if="question.questions!=null" :question-object="question"></question-multi-choices>
        <QuestionCompound v-if="question.options != null" :compound-object="question"></QuestionCompound>
        <br>
      </div>
      <div class="text-center" style="display: flex; justify-content: space-evenly">
        <button class="btn btn-danger" style="width: 10%;">Back</button>
        <button class="btn btn-danger" style="display: inline-block; width: 10%;">Submit</button>
      </div>
    </div>

and this is the component's js part

export default {
        name: "QuestionsPanel",
        components: {QuestionsPanelHeader, QuestionCompound},
        data() {
            return {
                sessionExam:null
            }
        },
        props:{
            subjectName:{
                type: String,
                required: true
            }
        },
        computed:{
            sessionExamObject(){
                return this.sessionExam
            }
        },
        mounted(){
            this.$root.$on('gotSessionExam',data=>{
                this.sessionExam=data
                console.log(data)
            })
        }
    }

notice in mounted i change sessionExam object whenever gotSessionExam is recieved and i fire it like this in another component when a button is clicked

this.$root.$emit('gotSessionExam',data)

how can i render the div when sessionExam is not null?

thanks a lot people

Your rendering code looks fine. You can even write v-if="sessionExamObject". Are you sure you receive proper data object from the event? Or receive them at all? — Eggon
Try logging something in sessionExamObject to verify if it gets triggered. Also change manually sessionExam, set it to some value, to verify if div is rendered. — Eggon
the div was rendered when i changed sessionExam manuallly in dev tool in chrome...there is something with the assignment in $on callback....maybe this doesn't refere to the component? — Jood jindy
You are using arrow function so it should work. But you might try substituting your callback with a callback method: methods: { assignMethod(data) {this.sessionExam=data} } and in on event: this.$root.$on('gotSessionExam', this.assignMethod) to rule out this possibility. — Eggon

Ross Young Ross Young · Accepted Answer · 2020-04-01T20:18:08

It may depend on where this other component with the this.$root.$emit event lives. I'd check out Vue's doc recommendation about utilizing a central event hub so that component ancestry isn't a limiting factor:

https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced

div not being rendered when object is changed in Vue

1 Answers