Modify the appearance of a single component among a collection of 20 instances

Question

Modify the appearance of a single component among a collection of 20 instances

I'm looking to dynamically change the background color of my components based on the colors of the images inside them. Each component should have its own unique color, but currently all 20 instances on the page are getting the same color. I've tried using inline styling and also experimented with refs and unique IDs based on `pokemonid`, but haven't had success.

The color is generated when the image is loaded in the component through a specific function.

Here's an example of the component code named pokemon-card:

<template>
  <div class="card">
    <div class="card__front" :style="{'background' : `radial-gradient(circle at 50% 0%, ${cardCircleColor} 36%, #fff 36%)`}">
      <div class="card__front__cardTop">
        <div class="card__front__cardTop__id"><span></span>{{ id }}</div>
      </div>
      <img class="card__front__img"
           :src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/' + id + '.png'"
           alt="pokemonImage" crossorigin="anonymous">
      <div class="card__front__name">
        <h3>{{ name }}</h3>
      </div>
    </div>
    <div class="card__back">
      <router-link :to="`/pokemonDetails/${id}`" class="card__back__button">Details</router-link>
    </div>
  </div>
</template>

The background color is set by this method:

methods: {
    //get color for background based on pokemon image
     getColor() {
       const fac = new FastAverageColor();
       fac.getColorAsync(document.querySelector(`.card__front__img`))
         .then(color => {
           this.cardCircleColor = color.hex
         })
     },
   },
   mounted() {
     this.getColor()
   },

Corresponding CSS snippet applying the color to radial-gradient (circle at 50% 0%, # 36%, #fff 36%);

&__front {
  transition: all 0.8s;
  //background: radial-gradient(circle at 50% 0%, #90aac1 36%, #fff 36%);
  //background-color: $cardBg_color;

Parent element:

<template>
  <div class="container">
    <div class="cardContainer">
        <pokemon-card v-for="data in pokemonData.results" :name="data.name" :id="data.id"></pokemon-card>
    </div>

    <div class="PaginationcontrolContainer">
      <div class="paginationControls">
        <div @click="decreasePaginationCounter" class="paginationControls__btn"> &lt </div>
        <input @change="manuallyChangingPaginationIndex" v-model="paginationIndex" type="number">
        <div @click="increasePaginationCounter" class="paginationControls__btn"> > </div>
      </div>
    </div>

  </div>
</template>

css vue.js sass vuejs3

Answer 1

Answer №1

Your query serves as a prime illustration of why it is advised not to directly manipulate the DOM while using Vue.

The issue lies in this snippet of code:

fac.getColorAsync(document.querySelector(`.card__front__img`))
  .then(...)

document.querySelector('.card__front__img')

always retrieves the first element that matches the specified selector across the entire DOM.

This essentially means that each instance of fac is targeting the same element and utilizing it as the source for colors. Consequently, identical input will yield similar output, repeating 20 times.

In lieu of this, it is recommended to adhere to Vue's guidelines on how to interact with the DOM. Consider using template refs.

For example:

<template>
  <!-- ... -->
    <img class="card__front__img" ref="image">
</template>

  // ...
  getColor() {
    //...
    fac.getColorAsync(this.$refs.image).then(...)
  }

By doing so, each component will reference its unique image ref, generating varying results if they load different images.

Additionally, ensure to heed @MichaelMano's recommendation and assign unique identifiers using :key within your v-for. Although not directly linked to the current bug you are encountering, overlooking this step can lead to subtle bugs like the one you are currently facing, which might require hours or even days to troubleshoot and rectify.

Note: If implementing my suggestion does not resolve the error, inspect the src of image at the time getColor() is executed, per component, and confirm they reflect the expected values (e.g.

console.log(this.$refs.image.getAttribute('src'))

)

For future queries: presenting a runnable minimal reproducible example would aid in providing more straightforward solutions.

Answer 2

Your query serves as a prime illustration of why it is advised not to directly manipulate the DOM while using Vue.

The issue lies in this snippet of code:

fac.getColorAsync(document.querySelector(`.card__front__img`))
  .then(...)

document.querySelector('.card__front__img')

always retrieves the first element that matches the specified selector across the entire DOM.

This essentially means that each instance of fac is targeting the same element and utilizing it as the source for colors. Consequently, identical input will yield similar output, repeating 20 times.

In lieu of this, it is recommended to adhere to Vue's guidelines on how to interact with the DOM. Consider using template refs.

For example:

<template>
  <!-- ... -->
    <img class="card__front__img" ref="image">
</template>

  // ...
  getColor() {
    //...
    fac.getColorAsync(this.$refs.image).then(...)
  }

By doing so, each component will reference its unique image ref, generating varying results if they load different images.

Additionally, ensure to heed @MichaelMano's recommendation and assign unique identifiers using :key within your v-for. Although not directly linked to the current bug you are encountering, overlooking this step can lead to subtle bugs like the one you are currently facing, which might require hours or even days to troubleshoot and rectify.

Note: If implementing my suggestion does not resolve the error, inspect the src of image at the time getColor() is executed, per component, and confirm they reflect the expected values (e.g.

console.log(this.$refs.image.getAttribute('src'))

)

For future queries: presenting a runnable minimal reproducible example would aid in providing more straightforward solutions.

Answer 3

Answer №2

Make sure to avoid using query selectors within Vue components, and instead utilize the ref property

Additionally, ensure that you use the :key directive in v-for

<script>
import { ref } from 'vue';

export default {
  setup() {
    const cardImage = ref();
    const cardCircleColor = ref();

    return {
      cardImage,
      cardCircleColor,
    }
  },

  mounted() {
    this.getColor();
  },

  methods: {
    getColor() {
      const fac = new FastAverageColor();
      fac.getColorAsync(this.cardImage)
          .then(color => {
            this.cardCircleColor = color.hex
          })
    },
  },
}
</script>

<template>
  <div class="card">
    <div class="card__front" :style="{'background' : `radial-gradient(circle at 50% 0%, ${cardCircleColor} 36%, #fff 36%)`}">
      <div class="card__front__cardTop">
        <div class="card__front__cardTop__id"><span></span>{{ id }}</div>
      </div>
    
      <img
        ref="cardImage"
        class="card__front__img"
        :src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/' + id + '.png'"
        alt="pokemonImage" crossorigin="anonymous">
        
      <div class="card__front__name">
        <h3>{{ name }}</h3>
      </div>
    </div>
    
    <div class="card__back">
      <router-link :to="`/pokemonDetails/${id}`" class="card__back__button">Details</router-link>
    </div>
  </div>
</template>

Answer 4

Make sure to avoid using query selectors within Vue components, and instead utilize the ref property

Additionally, ensure that you use the :key directive in v-for

<script>
import { ref } from 'vue';

export default {
  setup() {
    const cardImage = ref();
    const cardCircleColor = ref();

    return {
      cardImage,
      cardCircleColor,
    }
  },

  mounted() {
    this.getColor();
  },

  methods: {
    getColor() {
      const fac = new FastAverageColor();
      fac.getColorAsync(this.cardImage)
          .then(color => {
            this.cardCircleColor = color.hex
          })
    },
  },
}
</script>

<template>
  <div class="card">
    <div class="card__front" :style="{'background' : `radial-gradient(circle at 50% 0%, ${cardCircleColor} 36%, #fff 36%)`}">
      <div class="card__front__cardTop">
        <div class="card__front__cardTop__id"><span></span>{{ id }}</div>
      </div>
    
      <img
        ref="cardImage"
        class="card__front__img"
        :src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/' + id + '.png'"
        alt="pokemonImage" crossorigin="anonymous">
        
      <div class="card__front__name">
        <h3>{{ name }}</h3>
      </div>
    </div>
    
    <div class="card__back">
      <router-link :to="`/pokemonDetails/${id}`" class="card__back__button">Details</router-link>
    </div>
  </div>
</template>

Modify the appearance of a single component among a collection of 20 instances

Answer №1

Answer №2

Similar questions

What is the most effective way to prevent a <pre> element from overflowing and instead horizontally scrolling when placed within a table cell that is not

Turn the flipcard hover effect into an onclick action

Resolved plugin issue through CSS adjustments

The inner div's CSS margin-top is causing the parent div to be pushed downwards

choose particular column in every row from the table's header class name

unable to select a highlighted drop-down menu with focus

"Is it possible to disable the transition animation in mat-sidenav of Angular Material without affecting the animations of

Vue: Dragover event experiencing delayed responses from elements

Experiencing a problem with adjusting the layout on a backdrop picture

Sidebar Text Remains Visible Despite Collapsed Sidebar

Combining the background images of two separate <div> elements results in a deeper shadow effect than when they are individually displayed

The dropdown height feature is experiencing issues in the Chrome browser

Disabling the scrollbar within angular elements

What reasons could be preventing the state from updating correctly in Vuex?

Creating a strong line count in HTML with the added features of text wrapping and font size alteration

Achieving a full background with Bootstrap 4: the step-by-step guide

Tips for positioning text within a div element's bottom edge

How to trigger a force reload on a VueJS route with a different query parameter?

Inline-block display for file input button in Bootstrap 4 style

Decomposing a Vuex module into distinct files with Nuxt: A step-by-step guide