zwl1619 zwl1619 - 1 year ago 330
jQuery Question

Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or vuejs?

Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or vuejs?

this is the component:

<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>

the first item is active,but clicking another one will not make it active,how to do it via jquery or vuejs? thanks in advance!

Answer Source
// es6 js
new Vue({
  el: '#listGroup',
  data {
    selected: 0
  methods: {
    isSelected (i) {
      return i === this.selected

<div class="list-group" id='listGroup'>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(0) }" v-on:click="selected = 0">Cras justo odio</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(1) }"  v-on:click="selected = 1">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(2) }"  v-on:click="selected = 2">Morbi leo risus</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(3) }"  v-on:click="selected = 3">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(4) }"  v-on:click="selected = 4">Vestibulum at eros</a>

This defines a property of selected. When clicking a list item, the v-on hook changes the value of selected to the integer id in the v-on attributes expression. As the value of this.selected changes within the vue, the classes change because they are bound the output of the method isSelected() which is called when the selected value changes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download