What steps are needed to switch colors after a loop has been clicked?

Question

What steps are needed to switch colors after a loop has been clicked?

I have a loop setup like this:

data: {
  show: false
}

.test {
  hight: 10px;
  background-color: red;
}

.test2 {
  hight: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-for="value in data" :key="value.id">
  <div class="test" v-bind:class="{ test2: show }" v-on:click="show = !show">
  </div>
</div>

When I click any div, the height of all the divs changes from 15 to 10 or vice versa.

However, I would like to only change the height of the div that was clicked. How can I achieve this?

javascript loops vue.js bind

Answer 1

Answer №1

In order to achieve the desired effect, it is necessary to include a show variable for every element:

new Vue({
  el: "#app",
  data: {
      show: [],
    items: []
  },
  created() {
    fakeFetch().then((items) => {
       this.items = items;
       this.show = this.items.map(() => false);
    });
  },
  methods: {
    isShown(i) {
        return this.show[i]
    },
    changeShow(i) {
        Vue.set(this.show, i, !this.show[i]);
    }
  }
})

function fakeFetch() {
  return new Promise((resolve, reject) => {
     let count = Math.floor(Math.random() * 20) + 1;
     let result = [];
     for (let i = 0; i < count; i++) {
       result.push({ text: Math.random() });
     }
     resolve(result);
  })
}

.test {
  height:10px;
  background-color: red;
  margin: 10px;
}
.test2 {
  height: 35px;
 }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3d3e2e0b79657e657a7d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <h2>Items:</h2>
  <div 
  class="test" 
  :class="{ test2: isShown(index) }"
  @click="changeShow(index)" 
  v-for="(item,index) in items" :key="index">
  </div>
</div>

P.S. To simplify the process of managing visibility using the show array, consider creating each element as a component and controlling visibility internally with a single show variable.

Answer 2

In order to achieve the desired effect, it is necessary to include a show variable for every element:

new Vue({
  el: "#app",
  data: {
      show: [],
    items: []
  },
  created() {
    fakeFetch().then((items) => {
       this.items = items;
       this.show = this.items.map(() => false);
    });
  },
  methods: {
    isShown(i) {
        return this.show[i]
    },
    changeShow(i) {
        Vue.set(this.show, i, !this.show[i]);
    }
  }
})

function fakeFetch() {
  return new Promise((resolve, reject) => {
     let count = Math.floor(Math.random() * 20) + 1;
     let result = [];
     for (let i = 0; i < count; i++) {
       result.push({ text: Math.random() });
     }
     resolve(result);
  })
}

.test {
  height:10px;
  background-color: red;
  margin: 10px;
}
.test2 {
  height: 35px;
 }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3d3e2e0b79657e657a7d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <h2>Items:</h2>
  <div 
  class="test" 
  :class="{ test2: isShown(index) }"
  @click="changeShow(index)" 
  v-for="(item,index) in items" :key="index">
  </div>
</div>

P.S. To simplify the process of managing visibility using the show array, consider creating each element as a component and controlling visibility internally with a single show variable.

Answer 3

Answer №2

To easily manage the active state, you can set an active variable and apply a specific class when it matches the current button index.

<div v-for="(value, index) in data" :key="index">
  <div class="some-class" :class="{'active-class': index === active}" @click="active=index"></div>
</div>

.....

 data: function () { 
  return { 
    active: undefined
  }
 }

Answer 4

To easily manage the active state, you can set an active variable and apply a specific class when it matches the current button index.

<div v-for="(value, index) in data" :key="index">
  <div class="some-class" :class="{'active-class': index === active}" @click="active=index"></div>
</div>

.....

 data: function () { 
  return { 
    active: undefined
  }
 }

Answer 5

Answer №3

To make more specific changes, it's recommended to use a separate variable for each item rather than one variable controlling the class of every item.

If you have control over the displayed data, consider organizing it like this

data: {
  items: [{id: 1, visible: false},
          {id: 2, visible: false},
          {id: 3, visible: false}]
}

and modify the visibility attribute instead of using a global show variable.

If you don't have control over the data, creating a computed property might be a viable option.

You can test out this approach on the following codepen link: https://codepen.io/anon/pen/ejmdPX?editors=1111

Answer 6

To make more specific changes, it's recommended to use a separate variable for each item rather than one variable controlling the class of every item.

If you have control over the displayed data, consider organizing it like this

data: {
  items: [{id: 1, visible: false},
          {id: 2, visible: false},
          {id: 3, visible: false}]
}

and modify the visibility attribute instead of using a global show variable.

If you don't have control over the data, creating a computed property might be a viable option.

You can test out this approach on the following codepen link: https://codepen.io/anon/pen/ejmdPX?editors=1111

Answer 7

Answer №4

To specify the class you desire, implementing a method would be beneficial.

When executing v-on:click="myFunc()", an event is triggered allowing alterations to be made on the targeted element.

methods: {
  myFunc (event) {
    event.target.classList.toggle("test2")
  }
}

Answer 8

To specify the class you desire, implementing a method would be beneficial.

When executing v-on:click="myFunc()", an event is triggered allowing alterations to be made on the targeted element.

methods: {
  myFunc (event) {
    event.target.classList.toggle("test2")
  }
}

What steps are needed to switch colors after a loop has been clicked?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm having trouble locating my route for some unknown reason

What is the reason behind using 'dummy' local variables to define return object keys?

Is there a substitute for AngularJS $watch in Aurelia?

Is the Child-Parent-Communication Method Lost?

The JSON.parse function encounters issues when trying to parse due to a SyntaxError: Unexpected character found after JSON at position 2, causing it to be unable

Establishing the focal point and emphasis within a textarea input field

Data Binding in AngularJS appears to be non-functional

Customizing the Switch component individually for each item fetched from an API in React Native

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

Unable to save object in JavaScript memory

Generating output from a callback function in TypeScript

How to upload numerous chosen files from an Android device using PHP script

Leverage promises to alter reactive data, strategically placing them to minimize the frequency of triggers being activated

Control and manage AJAX POST requests in the controller

Ways to showcase information from an angular service

Top destination for verifying permissions in vue.js

Ember controller failing to update template upon property set within promise execution

Using a function parameter to restore the values of an array

Steps to create a zigzagging line connecting two elements

The compilation of PKG using Axios 1.x encounters an error