use same component with same props name in on page not works vuecli

Well. i have a component called Logo and i am using it in nearly every views and even in other components. Logo component takes only 1 props: "size" and i use javascript to mack it responsive depend on its font size but => for example i have a landing:
in landing i have component renderd in landing: navbar that contains a "logo component" inside OF HIM. and same time i use logo component in my landing view as well:

LOGO COMPONENT

<template lang="html">
    <div class="logoCon">
        <a class="logo">Some name for Logo</a>
    </div>
</template>
<script>
    props: ['size'],
    name: 'Logo',
    methods: {
        logoSizing(size){
            // java script code for make the sizing right.
        }
    },
    created(){
        // calling logoSizing function.
        this.logoSizing(this.size);

        // for adding the font size.
        document.querySelector(".logo").style.fontSize = (this.size + "px");
    }
</script>

NAVBAR COMPONENT

<template lang="html">
    <div class="navbarCon">
       //some code for navbar. and inside the navbar we have logo component:
       <logo :size="logoSize" />
    </div>
</template>
<script>
    name: 'Navbar',
    data: () => ({
      logoSize: "20"
    })
</script>

and the last one LANDING COMPONENT

<template lang="html">
    <div class="navbarCon">
       // navbar component
       <navbar />

       // we have logo component:
       <logo :size="logoSize" />
    </div>
</template>
<script>
    name: 'Landing',
    data: () => ({
      logoSize: "400"
    }),
    components: {
      navbar,
      logo
    }
</script>

so now if i run the code the "logoSize" varible dont work for each in seperate ways and get only one of the logo components, mostly just the navbar and the logo component in landing it gets no style at all from my java script.

=>how can i use the logo component multiple times in one page and works for each in seprate ways

THIS ISSUE IS NOT ONLY FOR MY LOGO COMPONENT ALL OF MY COMPONENTS ARE HAVE THE SAME PROBLME PLEASE HELP ME SOLVE IT…. I WANT TO CRY

65 thoughts on “use same component with same props name in on page not works vuecli”

Leave a Comment