javascript - 用vuejs或jquery怎么让bootstrap 4的list-group的项在被点击的时候激活？

Question

用vuejs或jquery怎么让bootstrap 4的list-group的项在被点击的时候激活？

<p class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <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>
</p>

就是上面这个，第一个处于激活状态，但是点击其他项不会切换，用vuejs或jquery怎么做可以达到这样的效果呢？
组件原链接http://v4-alpha.getbootstrap.com/components/list-group/#linked-items

Answer 1

jq:

$(".list-group-item").on("click", function(){
    $(".list-group-item").removeClass("active");
    $(this).addClass("active")
})

vue:

<template>
<p class="list-group">
  <a href="#" class="list-group-item" v-for="item in list" :class="active == $index? 'active': ''" v-text="item" @click="setactive($index)"></a>
</p>
</template>
<script>
export default {
  data(){
    return {
      active: 0,
      list: ['Cras justo odio', 'Dapibus ac facilisis in', 'Morbi leo risus', 'Porta ac consectetur ac', 'Vestibulum at eros']
    }
  },
  methods: {
    setactive(index) {
      this.active = index;
    }
  }
}
</script>

Answer 2

我之前回答过一个同样的问题，里面有demo
https://segmentfault.com/q/1010000005068816/a-1020000005069627