Using dynamic classes within a v-for loop

Question

Using dynamic classes within a v-for loop

Edited How can I dynamically assign classes to multiple elements within a v-for loop? Since I cannot utilize a computed property due to the presence of v-for, I attempted using a method by passing the index of the element, but that approach did not yield the desired result.

                    <div v-for="(pet,index) in pets"
                      :key="pet.id"
                      :index="index">
                      <v-row
                class="d-flex justify-center"
              >
                ... (code continues)

When a user selects a button, both the card containing the button and the button itself should have their styles modified to indicate selection. All other cards and buttons should revert to their default styles, emphasizing the selected card among the group.

javascript vue.js

Answer 1

Answer №1

Is this similar to what you had in mind?

<template>
  <div class="hello">
    {{ selected }}
    <button
      v-for="item in items"
      :key="item"
      @mousedown="selected = true"
      @mouseup="selected = false"
      :class="{ selected: selected, 'not-selected': !selected }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const items = reactive(["btn1", "btn2", "btn2"]);
    const selected = ref(false);
    return {
      selected,
      items,
    };
  },
};
</script>

<!-- Make sure to include the "scoped" attribute for CSS styling within this component only -->
<style scoped>
.selected {
  background-color: blue;
}
.not-selected {
  background-color: yellow;
}
</style>

I'm not quite following your objective here

Edit1:

In this case, I suggest creating two components:

The "container" component that contains the array of pets and utilizes a v-for loop
A "pet" component that displays individual pets

Add a boolean property to each pet indicating if it is selected.

In the "pet" component, assign classes based on this boolean.

Refer to the example provided for adding classes based on booleans.

Answer 2

Is this similar to what you had in mind?

<template>
  <div class="hello">
    {{ selected }}
    <button
      v-for="item in items"
      :key="item"
      @mousedown="selected = true"
      @mouseup="selected = false"
      :class="{ selected: selected, 'not-selected': !selected }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const items = reactive(["btn1", "btn2", "btn2"]);
    const selected = ref(false);
    return {
      selected,
      items,
    };
  },
};
</script>

<!-- Make sure to include the "scoped" attribute for CSS styling within this component only -->
<style scoped>
.selected {
  background-color: blue;
}
.not-selected {
  background-color: yellow;
}
</style>

I'm not quite following your objective here

Edit1:

In this case, I suggest creating two components:

The "container" component that contains the array of pets and utilizes a v-for loop
A "pet" component that displays individual pets

Add a boolean property to each pet indicating if it is selected.

In the "pet" component, assign classes based on this boolean.

Refer to the example provided for adding classes based on booleans.

Using dynamic classes within a v-for loop

Answer №1

Similar questions

Creating a centered and beautifully styled picture with a specific maximum size using React

Error: XYZ has already been declared in a higher scope in Typescript setInterval

Ensure that the search input field is in focus whenever the showSearch state is true

How can I incorporate eventData when using .bind() for the "keydown" event type?

JavaScript detecting improper XHTML syntax

Persisting dynamically generated table information into a multidimensional array

Encountering the error message "Unexpected token. Did you mean {'>'} or >?" when trying to use an arrow function in React

Is there a way to transform these into five columns within a single row using the Material-UI Grid system?

Challenges with managing VueJS methods and understanding the component lifecycle

unable to use redirect feature for specific URLs with nodejs module

What is the process for retrieving an object from a node.js server using JSON.stringify() in a JavaScript file?

Create a table within the B-Col element that automatically adjusts its size to match the column width using Vue-Bootstrap

Is it possible to utilize various return values generated by a regex?

Challenge with Vite, React, and MSW Integration

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

Difficulty establishing a connection between the front end and backend Web API

Why won't my AngularJS Google Maps marker trigger any events?

Making an Ajax request with JSON is yielding unexpected variables that cannot be modified or removed

What is the best method to dynamically assign a class to a TD element in a data table when adding

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

Using dynamic classes within a v-for loop

Answer №1

Similar questions

Creating a centered and beautifully styled picture with a specific maximum size using React

Error: XYZ has already been declared in a higher scope in Typescript setInterval

Ensure that the search input field is in focus whenever the showSearch state is true

How can I incorporate eventData when using .bind() for the "keydown" event type?

JavaScript detecting improper XHTML syntax

Persisting dynamically generated table information into a multidimensional array

Encountering the error message "Unexpected token. Did you mean {'>'} or &gt;?" when trying to use an arrow function in React

Is there a way to transform these into five columns within a single row using the Material-UI Grid system?

Challenges with managing VueJS methods and understanding the component lifecycle

unable to use redirect feature for specific URLs with nodejs module

What is the process for retrieving an object from a node.js server using JSON.stringify() in a JavaScript file?

Create a table within the B-Col element that automatically adjusts its size to match the column width using Vue-Bootstrap

Is it possible to utilize various return values generated by a regex?

Challenge with Vite, React, and MSW Integration

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

Difficulty establishing a connection between the front end and backend Web API

Why won't my AngularJS Google Maps marker trigger any events?

Making an Ajax request with JSON is yielding unexpected variables that cannot be modified or removed

What is the best method to dynamically assign a class to a TD element in a data table when adding

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

Encountering the error message "Unexpected token. Did you mean {'>'} or >?" when trying to use an arrow function in React