[Vuejs]-How can I get the props values in Vue.js?

by

1👍

✅

Your question is not clear, there is no definition which component is A and which is B.

It seems that you may have mixed up parent & child, so I’ll just try to show how to pass eid both ways.

If you want to pass eid from the child stream component to the parent for v-if check (which I think is the case), you need to use $emit, not prop:

Component A (Parent)

<section v-if="event.id == 0">
    <stream @get-event-id="getEventId"></stream>
</section>

data() {
    configs: {
        event: {}
    }
},
methods: {
    getEventId(id) {
        this.configs.event.id = id
    }
}

Component B (Child)

data() {
    event: {id: 0}
},
mounted(){
    this.$emit('get-event-id', this.event.id)
},

That way if stream eid will be 0, like here, the component will not render.

However, if you would need to pass eid from parent component to stream component, it would look like this:

Component A (Parent)

<section v-if="">
    <stream :configs="{eid : event.id}"></stream>
</section>

data() {
    event: {id: 0}
}

Component B (Child)

props: ['configs'],
mounted(){
    console.log(this.configs.eid)
},

This way you will get in console the parent’s eid.

👤Shipso

0👍

If you’re trying to send the event.id to stream as property, then you can simply do it like this

<section v-if="" >
  <stream  :eventId="event.id"></stream>
</section>

Then from the Stream.vue component, you can receive the property like

export default {
    name: "Stream",
    props: ["eventId"]
}
👤Rijosh

Leave a comment