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

AJAX is not displaying the expected output

JavaScript powered caller ID for web applications

Hide other dropdown when one dropdown is clicked

Having difficulty passing a function as a parameter from a NextJS component

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

Using JSON with PHP to send data and receiving the response back with JavaScript

Express.js automatically sets timeouts for requests to static files

Calculate a value within a MongoDB field

The functionality of a Vue custom tooltip behaves strangely after clicking the button multiple times

Transferring properties from React Router to child components on the server side

Issue with the AngularJS build in Yeoman

Tips for displaying only the items that are currently visible in an AngularJS Dropdown

Implementing closure within a recursive function allows for better control

Guide on utilizing map function in JavaScript and Vue to generate a fresh array

Discover the best method for transferring MySQL data between pages

Capture the selected hyperlink and show the corresponding page title in a designated box for reference

Menu secured in place within the wrapper

Show the current Date and Time dynamically using only one line of JavaScript code

Using $nin alongside $and in Mongoose

Refreshing a div by replacing its content with text entered into an input field