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>
export default{
    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>
export default{
    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>
export default{ 
    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

Answer

So considering that your logoSizing(size) doesn’t change the size value (because you souldn’t mutate props because when you do, you change it in the parent component as well and may lead to inconsistent changes), I would say that maybe your components are being renderes with the same id (which sound kinda weird).

To solve that “problem”, (and again this shouldn’t happen unless you’re forcing it somehow) give to the components different key’s like

<logo :size="400" :key="navbarLogo"/>
<logo :size="300" :key="appbarLogo"/>

This forces your components to have a different ID in DOM.

But a codepen would be really handy

Advertisement

Answer