Unable to implement styles or classes in Vue.js when utilizing it in a loop

Question

Unable to implement styles or classes in Vue.js when utilizing it in a loop

My code has a feature where item.fav starts as false, but changes to true when a button is clicked. I want the color of the icon to turn purple when item.fav is true, but it's not working as expected.

 <template>
      <v-container fluid>
        <v-row>
         <v-col v-for="(item, index) in items">
          <v-btn icon @click='changeFav(item)'>
           <v-icon :style='{color:`${fillcolor(item)}`}'>mdi-heart</v-icon>
          </v-btn>
         </v-col>
        </v-row>
      </v-container>
    </template>
<script>
 export default {
  ....,
  methods: {
   fillcolor(item){
    return item.fav ? 'purple' : 'orange';
   },
   changeFav(item){
     item.fav=true;
   },
  }
</script>

I also attempted to use a class

.....
<v-icon class='{fillColor: item.fav}'>mdi-heart</v-icon>
.....

<style>
.fillColor {
color: 'purple';
}
</style>

Using a data variable as the condition works, but I can't do that in this loop. What am I doing wrong here or how can I do it better?

css vue.js vuetify.js

Answer 1

Answer №1

For more information on Class and Style Bindings, click here

Here is an example of how to implement it

<script setup>
  import {ref} from 'vue'
const toggleFavStatus = (element) => {
     element.favorite = !element.favorite;
   }

const elements = ref([
  {name: "test1", favorite: false},
  {name: "test2", favorite: false},
  {name: "test3", favorite: true},
  {name: "test4", favorite: false},
  {name: "test5", favorite: false},
  {name: "test6", favorite: false},
  {name: "test7", favorite: false},
])
</script>

<template>
  <div v-for="(element, index) in elements" :key="index" @click="toggleFavStatus(element)" >
    <span :class="[element.favorite ? 'yellow' : 'green']">
      {{element.name}}
    </span>
  </div>
</template>

<style >
  .green {
    color: green;
  }
  .yellow {
    color: yellow;
  }
</style>

Answer 2

For more information on Class and Style Bindings, click here

Here is an example of how to implement it

<script setup>
  import {ref} from 'vue'
const toggleFavStatus = (element) => {
     element.favorite = !element.favorite;
   }

const elements = ref([
  {name: "test1", favorite: false},
  {name: "test2", favorite: false},
  {name: "test3", favorite: true},
  {name: "test4", favorite: false},
  {name: "test5", favorite: false},
  {name: "test6", favorite: false},
  {name: "test7", favorite: false},
])
</script>

<template>
  <div v-for="(element, index) in elements" :key="index" @click="toggleFavStatus(element)" >
    <span :class="[element.favorite ? 'yellow' : 'green']">
      {{element.name}}
    </span>
  </div>
</template>

<style >
  .green {
    color: green;
  }
  .yellow {
    color: yellow;
  }
</style>

Answer 3

Answer №2

There is a flaw in your code where the fillcolor method should be executed on each click, but instead, you are calling the changeFav method which only changes the item.fav property without triggering the fillcolor method.

To fix this issue, you need to modify your code as follows:

<v-container fluid>
      <v-row>
        <v-col v-for="(item, index) in items" :key="index">
          <v-btn icon @click="changeFav(item)">
            <v-icon :style="{ color: `${fillcolor(item)}` }">mdi-heart</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>

export default {
  ....,
methods: {
    fillcolor(item) {
      return item.fav ? "purple" : "orange";
    },

    changeFav(item) {
      item.fav = true;
      return this.fillcolor(item)
    },
  },
}

================================================================ Alternatively, you can achieve the same result with the following code:

 <template>
  <v-app>
    <v-container fluid>
      <v-row>
        <v-col v-for="(item, index) in items" :key="index">
          <v-btn icon @click="item.fav = !item.fav">
            <v-icon :color="item.fav ? 'purple': 'red'">mdi-heart</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

However, the approach you choose depends on how you handle your data. If you are using vuex, then you should consider using mutations. Assuming you have the items and can manage them as shown below:

export default {
  data: () => ({
    items: [
      { name: "t1", fav: false },
      { name: "t2", fav: false },
      { name: "t3", fav: false },
      { name: "t4", fav: false },
      { name: "t5", fav: false },
      { name: "t6", fav: false },
      { name: "t7", fav: false },
    ],
  }),
};

Answer 4

There is a flaw in your code where the fillcolor method should be executed on each click, but instead, you are calling the changeFav method which only changes the item.fav property without triggering the fillcolor method.

To fix this issue, you need to modify your code as follows:

<v-container fluid>
      <v-row>
        <v-col v-for="(item, index) in items" :key="index">
          <v-btn icon @click="changeFav(item)">
            <v-icon :style="{ color: `${fillcolor(item)}` }">mdi-heart</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>

export default {
  ....,
methods: {
    fillcolor(item) {
      return item.fav ? "purple" : "orange";
    },

    changeFav(item) {
      item.fav = true;
      return this.fillcolor(item)
    },
  },
}

================================================================ Alternatively, you can achieve the same result with the following code:

 <template>
  <v-app>
    <v-container fluid>
      <v-row>
        <v-col v-for="(item, index) in items" :key="index">
          <v-btn icon @click="item.fav = !item.fav">
            <v-icon :color="item.fav ? 'purple': 'red'">mdi-heart</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

However, the approach you choose depends on how you handle your data. If you are using vuex, then you should consider using mutations. Assuming you have the items and can manage them as shown below:

export default {
  data: () => ({
    items: [
      { name: "t1", fav: false },
      { name: "t2", fav: false },
      { name: "t3", fav: false },
      { name: "t4", fav: false },
      { name: "t5", fav: false },
      { name: "t6", fav: false },
      { name: "t7", fav: false },
    ],
  }),
};

Unable to implement styles or classes in Vue.js when utilizing it in a loop

Answer №1

Answer №2

Similar questions

Explication of syntax not functioning

Challenge with adjusting opacity of background when hovering over a box

Is there a way to circumvent the mouse up event?

How can you style an HTML tag using esc_html in CSS?

I encountered an issue with displaying API data in V-data-table using axios in Vue.js - unfortunately, the data was not showing up as expected

Witness the profound impact unfolding at a deeper level

Difficulty in displaying JavaScript function output as text

Utilize the "display: flex" property to position an avatar alongside a comment that is wrapped

Footer disappearing on iPad Safari viewing

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

Is all of the CSS stored in one or multiple files?

Tips for toggling the visibility of a flexbox-styled popup using jQuery

Dividers afloat - expanding current script with multiple additions

Using jQuery to retrieve the location of an element with a specific class

Align Text with Icon Using FontAwesome

The IntersectionObserver doesn't seem to be working on iOS, yet it functions correctly on Android within a Nuxt

The dropdown menu in the navigation bar is not properly lined up with its corresponding menu item

What is the best way to make sure the background color of a container stretches across the full width of the screen?

Determine the active state of the router link to correspond with the prop

What are some ways to enable text highlighting when it is disabled?