Search code examples
vue.jsdynamiccomponentsupdatesvue-props

Dynamic prop component not working in Vue 3

There's a component with a prop, a src from an image. I can't figure out how to pass from other component.

The component with prop:

<template>
<img :src="avatar" />
</template>

<script>
    export default {        
        props: ['avatar']
    }
</script>

Other component:

<Card avatar="avatar" />

<script>
export default {        
        components: {
            Card
        },
        data() {
            return {
                avatar: ''
            }
        },
        // fetch updates avatar ...
</script>

I tested, avatar is being updated in the component, but the props on other component, not. What I'm doing wrong?

Solution

  • You are passing in a string "avatar" with avatar="avatar", you probably want to do :avatar="avatar" (with a leading :) to pass in the variable