What's the best way to switch between colors in a Vue list?

Question

What's the best way to switch between colors in a Vue list?

I have a custom tree-view component that I'm working on:

<template>
    <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl($event)" :title="tree.name">{{tree.name}} </li>
  <ul v-show="isOpen" v-if="isFolder" class="ul__ctg list">
    <TreeView :tree="chld" v-for="(chld, inx) in tree.children" :key="inx" :depth="depth +1"></TreeView>
  </ul>
</template>

Here is the script where I'm trying to change the color of an item when clicked:

     getEl(e){
        this.col = 'blue'
        //how turn previous item`s color back?
        return this.tree.id
      },

I am struggling with reverting the color of the previously selected item back to its initial state. When I click on an item, it changes color as intended, but making sure the previous selection goes back to normal has been a challenge for me.

javascript vue.js vuejs3

Answer 1

Answer №1

To meet your specifications, it is necessary to assign a default color to each tree object initially and then allow toggling on click.

Check out the Live Demo :

new Vue({
  el: '#app',
  data: {
    trees: [{
        name: 'Tree 1'
    }, {
        name: 'Tree 2'
    }, {
        name: 'Tree 3'
    }, {
        name: 'Tree 4'
    }],
    defaultColor: 'green'
  },
  mounted() {
    this.trees = this.trees.map(obj => {
        obj.color = this.defaultColor;
      return obj;
    });
  },
  methods: {
    getEl(index) {
        const changedColor = 'blue';
        this.trees = this.trees.map((obj, i) => {
            obj.color = (i === index) ? changedColor : this.defaultColor;
          return obj;
        });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="(tree, index) in trees" :key="index" :style="{'background-color': `${tree.color}`}" @click="getEl(index)">{{tree.name}} </li>
</div>

Answer 2

To meet your specifications, it is necessary to assign a default color to each tree object initially and then allow toggling on click.

Check out the Live Demo :

new Vue({
  el: '#app',
  data: {
    trees: [{
        name: 'Tree 1'
    }, {
        name: 'Tree 2'
    }, {
        name: 'Tree 3'
    }, {
        name: 'Tree 4'
    }],
    defaultColor: 'green'
  },
  mounted() {
    this.trees = this.trees.map(obj => {
        obj.color = this.defaultColor;
      return obj;
    });
  },
  methods: {
    getEl(index) {
        const changedColor = 'blue';
        this.trees = this.trees.map((obj, i) => {
            obj.color = (i === index) ? changedColor : this.defaultColor;
          return obj;
        });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="(tree, index) in trees" :key="index" :style="{'background-color': `${tree.color}`}" @click="getEl(index)">{{tree.name}} </li>
</div>

What's the best way to switch between colors in a Vue list?

Answer №1

Similar questions

Interested in discovering the ins and outs of the JavaScript Map function?

Why does Material-UI TableCell-root include a padding-right of 40px?

"Revamping the text style of input materials in React JS: A step-by

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Firing ng-change with fileModel or input type="file"

Transforming Node's loops into asynchronous functions

What is the best way to pass the "$user" variable in a loadable file using ajax?

The functionality to generate forms on the click of a button appears to be malfunctioning

The function of jQuery .click() not triggering on elements within msDropDown

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

Is there a way to showcase various category._id within a single page route using Vue.js?

TabContainer - streamline your selection process with inline tabs

JavaScript Error - Value Not Assigned

Leveraging the results from a static React function

The issue with ng-change is causing the previously selected drop down option to be cleared

What is the reasoning behind having two separate permission dialog boxes for accessing the webcam and microphone in flash?

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Is there a way to resolve the MongoDB Database-Differ Error?

Unearthing the worth of the closest button that was clicked

JavaScript encountered an issue while parsing XML: the format is not well-formed