Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Question

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component:

Vue.component('list-category', {
  template: "#lc",
  props: ['data', 'category', 'search'],
  data() {
    return {
      open: false,
      categoryId: this.category
    }
  },
  mounted() {
    let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
  },
  computed: {
    icon() {
      return {
        'fa-plus': !this.open,
        'fa-minus': this.open,
      }
    },
    isFolder() {
      return this.data.children && this.data.children.length
    },
    isShow() {
      return this.open ? 'show' : 'hide'
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    },
    filterByCategory(id) {
      this.categoryId = id
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      categories: [ /* category data here */],
      category: 7 // active category ID
    }
  }
})

.active {
  background: yellow;
}

/* CSS styles here */
.show {
  display: block !important;
}

.hide {
  display: none !important;
}

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="app">
  <div class="panel panel-default pd-search-filter">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-circle-o"></i> By Category</h3>
    </div>
    <div class="panel-body">
      <ul class="filter-category" v-for="list in categories">
        <list-category :data="list" :category="category"></list-category>
      </ul>
    </div>
  </div>
</div>

If you want to see a demo and full code, check out this link: http://jsfiddle.net/vxLhbo5m/861/

In the demo, the category "Hazard" appears to be active. However, when clicking on the category "Morata," it does not become active as expected. How can I resolve this issue?

===========================================================================

javascript css vue.js vuejs2 vue-component

Answer 1

Answer №1

To update the category calculator, it is recommended to move it to a watcher (instead of using mount()) and emit/listen to events from child to parent in order to update the category and collapse the non-selected sub-tree.

You can find an updated JSFiddle demo here.

Here are the changes that need to be made:

Template:

Parent:

Change this:

<div id="app">
    ...
        <list-category :data="list" :category="category"></list-category>

Add listening for the category event and update the category property in the parent component:

<div id="app">
    ...
        <list-category :data="list" :category="category" @category="category = $event"></list-category>

Child:

Change this:

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId"></list-category>

Add listener for the category event and emit it to the parent component:

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId" @category="$emit('category', $event)"></list-category>

JavaScript (all within the child component):

Modify filterByCategory to emit the event instead of mutating the property:

From:

filterByCategory(id) {
  this.categoryId = id
}

To:

filterByCategory(id) {
  this.$emit('category', id);
}

Remove the mounted hook and add a watcher instead:

Remove mounted:

mounted() {
  let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
},

Add a watcher to detect when the category changes in the parent component:

watch: {
  category: {
    handler() {
      this.categoryId = this.category
      let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
      this.open = isDataOpen(this.data);
    },
    immediate: true
  }
}

For a live demonstration, refer to the code snippet below:

Answer 2

To update the category calculator, it is recommended to move it to a watcher (instead of using mount()) and emit/listen to events from child to parent in order to update the category and collapse the non-selected sub-tree.

You can find an updated JSFiddle demo here.

Here are the changes that need to be made:

Template:

Parent:

Change this:

<div id="app">
    ...
        <list-category :data="list" :category="category"></list-category>

Add listening for the category event and update the category property in the parent component:

<div id="app">
    ...
        <list-category :data="list" :category="category" @category="category = $event"></list-category>

Child:

Change this:

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId"></list-category>

Add listener for the category event and emit it to the parent component:

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId" @category="$emit('category', $event)"></list-category>

JavaScript (all within the child component):

Modify filterByCategory to emit the event instead of mutating the property:

From:

filterByCategory(id) {
  this.categoryId = id
}

To:

filterByCategory(id) {
  this.$emit('category', id);
}

Remove the mounted hook and add a watcher instead:

Remove mounted:

mounted() {
  let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
},

Add a watcher to detect when the category changes in the parent component:

watch: {
  category: {
    handler() {
      this.categoryId = this.category
      let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
      this.open = isDataOpen(this.data);
    },
    immediate: true
  }
}

For a live demonstration, refer to the code snippet below:

Answer 3

Answer №2

It is not possible to directly manipulate the data of a parent element from a child component. To make changes to the parent's data, you must emit an event to the parent and then update the data accordingly.

Below is an example demonstrating how to utilize this.$emit. I had to modify the JSON data to prevent recursive calls to the same template, but this should provide you with insight on modifying the parent data element.

Vue.component('list-category', {
  template: "#lc",
  props: ['data', 'category', 'search'],
  data() {
    return {
      open: false,
      categoryId: this.category
    }
  },
  mounted() {
    let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
  },
  computed: {
    icon() {
      return {
        'fa-plus': !this.open,
        'fa-minus': this.open,
      }
    },
    isFolder() {
      return this.data.children && this.data.children.length
    },
    isShow() {
      return this.open ? 'show' : 'hide'
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    },
    filterByCategory: function(id){
      this.$emit('update-active-category', id);
      console.log('Emitting: ' + id);
    }
  }
})

new Vue({
  el: '#app',
  data() {
return {
  categories: [/*Array of category objects*/],
    category: 7
    }
  },
  methods: {
    updateActiveCategory: function(id) {
    this.category = id;
  }
}
})

/* CSS Styles */

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="app">/*HTML template structure*/</div>

<template id="lc">/*List category template definition*/</template>

Answer 4

It is not possible to directly manipulate the data of a parent element from a child component. To make changes to the parent's data, you must emit an event to the parent and then update the data accordingly.

Below is an example demonstrating how to utilize this.$emit. I had to modify the JSON data to prevent recursive calls to the same template, but this should provide you with insight on modifying the parent data element.

Vue.component('list-category', {
  template: "#lc",
  props: ['data', 'category', 'search'],
  data() {
    return {
      open: false,
      categoryId: this.category
    }
  },
  mounted() {
    let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
  },
  computed: {
    icon() {
      return {
        'fa-plus': !this.open,
        'fa-minus': this.open,
      }
    },
    isFolder() {
      return this.data.children && this.data.children.length
    },
    isShow() {
      return this.open ? 'show' : 'hide'
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    },
    filterByCategory: function(id){
      this.$emit('update-active-category', id);
      console.log('Emitting: ' + id);
    }
  }
})

new Vue({
  el: '#app',
  data() {
return {
  categories: [/*Array of category objects*/],
    category: 7
    }
  },
  methods: {
    updateActiveCategory: function(id) {
    this.category = id;
  }
}
})

/* CSS Styles */

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="app">/*HTML template structure*/</div>

<template id="lc">/*List category template definition*/</template>

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Answer №1

Answer №2

Similar questions

Prevent users from selecting elements on the mobile site

"Exploring the Depths: How Node.js Utilizes Recursive Calls

Utilizing ng-disabled with a custom directive

What is the process of developing a straightforward Node.js script to encapsulate a binary or executable file?

Displaying a loading spinner image as PHP script runs

Shuffle the contents of various div elements, conceal one, reveal another

displaying several gltf 3D models simultaneously on a map using mapbox gl and three js

Angular JS function is returning before the completion of the http.get request

Obtain module-specific members through programmatic means

Display a JSON encoded array using Jquery

Issues with HTML marquee not functioning properly post fadeIn()

When executing npm run server, an error is generated saying: "sh: 1: vue-cli-service: not

Tips on restricting dates to be equal to or earlier:

morris.js - displaying a dynamic line chart using JSON data

React: The error message is saying that it cannot retrieve the 'handler' property because it is either undefined or null

Can WebDriver (HtmlUnit, Ruby bindings) be configured to bypass JavaScript exceptions?

Experiencing an issue with Jest - Error: unable to access property 'forEach' of null

Issue with React event hierarchy

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

The problem with JQuery ajax arises when attempting to send a file input value