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

Performing an AJAX call every half-hour using JavaScript

Is it possible for a memory leak to occur in node.js when using new Date()?

Using JavaScript for Array manipulations

The array element is not being shown in the id "main" when using a for loop with the onchange function

apostrophe cutting off a portion of the input field's value

Having trouble with the installation of go get wails?

Encountering difficulty retrieving the value of a hidden input with jQuery's find method

The console does not display the JSON data for requests and responses

What is the best way to create a JavaScript array after fetching data from an AJAX request that returns a JSON array?

Connecting a string array to the navigation bar

NodeJS Jest test failing due to a global variable being set for a different test already

Selecting a Child Component in Vue.js: A Guide to Specifying the Correct Component

Error: The function coolArr.printArray is not defined in the npm package being imported

Replace Jade script with block override

What is the best way to update a form after it has been submitted?

Unable to trigger Vuejs click event when using v-if condition

What is the best way to generate a new DIV every time a button is clicked?

Utilize Node.js and an API to generate a new problem in GitHub, but encountering an issue where the response

Highlighting a Table Column with a Radio Button

Scroll the div back to the top when the form is submitted