[Vuejs]-Emit event dont work and active icon on current button vue3

by

1👍

✅

You are emitting an event called color at @click="$emit('color', colors[themeColor])",

but you are listening to an event called colors at <ThemeChanger :theme-colors="themeColors" @colors="c => color = c" />

I think changing the event names so that these two match would be sufficient to get your code working.

In regards to getting the check mark change with the current theme, there are multiple ways you could go about it. I think the best way (easy, but scalabole) to do this would be to have another prop called something like currentThemeColor on your ThemeChanger.

Then, in your v-for loop, you could do something like:

<button
  class="rounded-full"
  v-for="(themeColor, index) in themeColors"
  :key="`theme-changer-${index}`"
  :class="[index ? 'p-3' : 'p-1']"
  :style="{ backgroundColor: colors[themeColor][500] }"
  @click="$emit('color', colors[themeColor])"
>
<svg v-if="currentThemeColor === themeColor" ... >
</div>

This way, your ThemeChanger would be re-rendered every time the prop changes and react accordingly. Using refs would be another way, but I think later on, you will want to eventually move the theme logic out of the parent component and move it to some kind of global provider, and using props would work with that kind of setup as well with minimal changes.

👤cSharp

Leave a comment