zwl1619 zwl1619 - 4 months ago 95x
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!

// 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.