Choose one distinctive icon from a multitude - vue.js

Question

Choose one distinctive icon from a multitude - vue.js

I'm feeling really confused at the moment. I have a list of items, each with a heart-shaped "like" button. When I click on the icon, I want the color to change. However, the issue is that all the hearts change color instead of just the one I clicked on. Should I include an argument in the markAsFavorite method, such as index or book?


 <template>
    <v-flex v-for="(book, index) in allBooks">
     <div>Title: {{ book.title }}</div>
     <i @click="markAsFavorite(index)" :class="{isActive: isActive(index)}" class="fas fa-heart"></i>
 </template
 <script>
   name: 'Books',
   data () {
      return {
        allBooks: [
           { title: "one" },
           { title: "two" },
           { title: "three" },
           { title: "four" },
         ],
        activeHeartIndex: -1,
     }
   },
  methods: {       
    markAsFavorite(index) {
        this.activeHeartIndex = index;
    },
    isActive(index) {
        return this.activeHeartIndex === index;
    }
   }
 </script>

javascript vue.js

Answer 1

Answer №1

Each and every item must possess the property isMark as shown below:

UPDATE: You have the option to combine properties with your original data once it has been retrieved:

const myData = [
  { title: "one"},
  { title: "two" },
  { title: "three" },
  { title: "four" },
]

new Vue({
  el: '#app',

  data() {
    return {
      isLoading: true,
      allBooks: []
    }
  },
  
  created() {
    this.fetchAPI()
  },
  
  methods: {
    fetchAPI() {
      setTimeout(() => {
        this.allBooks = myData.map(item => ({...item, isMark: false }))
        this.isLoading = false
      }, 2000)
    },
    
    markAsFavorite(book) {
      book.isMark = !book.isMark
    }
  }
})

.my-icon {  
  cursor: pointer;
  margin-left: 4px;
}

.isActive {
  color: red;
}

.flex {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

<div id="app">
  <span v-if="isLoading">
    loading
    <i class="fas fa-spinner fa-spin"></i>
  </span>
  
  <template v-else>
    <div class="flex" v-for="(book, index) in allBooks" :key="index">
      <div>Title: {{ book.title }}</div>
      <span
        :class="[
          { isActive: book.isMark }, 
          'my-icon'
        ]"
        @click="markAsFavorite(book)"
      >
        <i class="fas fa-heart"></i>
      </span>
    </div>
  </template>
</div>

Answer 2

Each and every item must possess the property isMark as shown below:

UPDATE: You have the option to combine properties with your original data once it has been retrieved:

const myData = [
  { title: "one"},
  { title: "two" },
  { title: "three" },
  { title: "four" },
]

new Vue({
  el: '#app',

  data() {
    return {
      isLoading: true,
      allBooks: []
    }
  },
  
  created() {
    this.fetchAPI()
  },
  
  methods: {
    fetchAPI() {
      setTimeout(() => {
        this.allBooks = myData.map(item => ({...item, isMark: false }))
        this.isLoading = false
      }, 2000)
    },
    
    markAsFavorite(book) {
      book.isMark = !book.isMark
    }
  }
})

.my-icon {  
  cursor: pointer;
  margin-left: 4px;
}

.isActive {
  color: red;
}

.flex {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

<div id="app">
  <span v-if="isLoading">
    loading
    <i class="fas fa-spinner fa-spin"></i>
  </span>
  
  <template v-else>
    <div class="flex" v-for="(book, index) in allBooks" :key="index">
      <div>Title: {{ book.title }}</div>
      <span
        :class="[
          { isActive: book.isMark }, 
          'my-icon'
        ]"
        @click="markAsFavorite(book)"
      >
        <i class="fas fa-heart"></i>
      </span>
    </div>
  </template>
</div>

Answer 3

Answer №2

To ensure better organization, I recommend creating a separate component for each individual book. This way, each book can manage its own isMark status.

BookComponent.vue

<template>
  <div>
    <div>Title: {{ book.title }}</div>
    <i @click="markAsFavorite" :class="{isActive: isMark}" class="fas fa-heart"></i>
  </div>
</template>

<script>
export default {
  name: 'Book',
  props: { book: Object },
  data() {
    return {
      isMark: false
    };
  },
  methods: {
    markAsFavorite() {
      this.isMark = !this.isMark;
      this.$emit(this.isMark ? 'marked' : 'unmarked', this.book);
    }
  }
}
</script>

Then, in the main Books component:

<template>
  <v-flex v-for="(book, index) in allBooks" :key="index">
    <Book :book="book" @marked="handleMarked" @unmarked="handleUnmarked" />
  </v-flex>
</template>

<script>
import Book from './BookComponent.vue';

export default {
  name: 'Books',
  components: { Book },
  // other necessary code goes here
}
</script>

Answer 4

To ensure better organization, I recommend creating a separate component for each individual book. This way, each book can manage its own isMark status.

BookComponent.vue

<template>
  <div>
    <div>Title: {{ book.title }}</div>
    <i @click="markAsFavorite" :class="{isActive: isMark}" class="fas fa-heart"></i>
  </div>
</template>

<script>
export default {
  name: 'Book',
  props: { book: Object },
  data() {
    return {
      isMark: false
    };
  },
  methods: {
    markAsFavorite() {
      this.isMark = !this.isMark;
      this.$emit(this.isMark ? 'marked' : 'unmarked', this.book);
    }
  }
}
</script>

Then, in the main Books component:

<template>
  <v-flex v-for="(book, index) in allBooks" :key="index">
    <Book :book="book" @marked="handleMarked" @unmarked="handleUnmarked" />
  </v-flex>
</template>

<script>
import Book from './BookComponent.vue';

export default {
  name: 'Books',
  components: { Book },
  // other necessary code goes here
}
</script>

Choose one distinctive icon from a multitude - vue.js

Answer №1

Answer №2

BookComponent.vue

Similar questions

Looking for answers to a question about Handlebars in Node.js? Click on the following link to explore more

Are you having trouble grasping JavaScript concepts?

include a button next to the input field

Error: Unable to register both views with identical name RNDateTimePicker due to Invariant Violation

How can you refresh a functional component using a class method when the props are updated?

the slider HTML control is missing a value

Issue with Flowtype not properly refreshing when maximizing or minimizing

Cart cannot function as a constructor

Guide to enclosing selected text within a span tag and positioning a div in relation to it using JavaScript

Is there a way for me to determine the size of this JSON structure?

Ways to activate a watcher even when it is assigned to the same newVal

What does {``} denote in react-native programming?

Next.js allows for dynamic page routing using the `useState` hook to redirect users

Updating an object's matrix in THREE.js after adjusting its position using Raycaster

Comparing JSON and JavaScript object arrays: Exploring the differences in outcomes and strategies for achieving desired results

Transferring and bringing in components in React without ES6

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Utilizing Angular JS to ensure services are universally accessible across controllers and views

Vue router is unable to render or mount the component at the root path

Retrieve a result from this promise