BootstrapVue 按钮状态：单击其他按钮时重置按钮答案

【问题标题】：BootstrapVue Button States: Reset button when other button is clickedBootstrapVue 按钮状态：单击其他按钮时重置按钮
【发布时间】：2021-04-02 15:37:28
【问题描述】：

考虑下面的代码

<div id='app'>
  <div class="card shadow bg-light m-4">
    <b-table striped hover :items="items" :fields="fields" responsive>
      <template #cell(age)="data">
        <b-button :pressed.sync="data.item.age_visible" pill variant="outline-danger">
          <span v-if="data.item.age_visible">{{data.item.age}}</span>
          <span v-else>Show Age</span>
        </b-button>
      </template>
    </b-table>
  </div>
</div>

new Vue({
  el: "#app",
  data() {
    return {
      fields: ['first_name', 'last_name', 'age'],
      items: [
        { age: 40, age_visible: false, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, age_visible: false, first_name: 'Larsen', last_name: 'Shaw' },
        { age: 89, age_visible: false, first_name: 'Geneva', last_name: 'Wilson' },
        { age: 38, age_visible: false, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  },
});

给你

当您点击“显示年龄”时，会显示年龄。试试codepen。

我的问题：

当有人点击“显示年龄”的不同行时，显示行中的年龄现在应该再次隐藏。我怎样才能做到这一点？

还请告诉我age_visible 列是否真的有必要。

版本

Vue 2.6.12
引导程序 4.6.0
BootstrapVue 2.21.2

【问题讨论】：

标签： vuejs2 toggle show-hide bootstrap-vue

【解决方案1】：

我不认为age_visible 是必要的。这里的问题似乎是，一旦您移动到下一个按钮，您就永远不会对之前单击的按钮执行任何操作。当您点击一个新按钮时，最后一个按钮应该会恢复到原来的状态。

我的想法是在data() 中跟踪当前索引，然后当您单击按钮时，它会检查当前索引是否与刚刚单击的按钮匹配。如果为真，则显示年龄，如果为假，则隐藏它。关于我的解决方案，唯一奇怪的 CSS 是按钮一旦被点击就不再保持红色，除非你将鼠标悬停在它上面。

这就是我所拥有的

new Vue({
  el: "#app",
  data() {
    return {
      currentIndex: -1,
      fields: ['first_name', 'last_name', 'age'],
      items: [
        { index: 0, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { index: 1, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { index: 2, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { index: 3, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  },
  methods: {
    setIndex(pendingIndex) {
      this.currentIndex = pendingIndex
    }
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <div class="card shadow bg-light m-4">
    <b-table striped hover :items="items" :fields="fields" responsive>
      <template #cell(age)="data">
        <b-button @click="setIndex(data.item.index)" pill variant="outline-danger">
          <span v-if="currentIndex === data.item.index">{{data.item.age}}</span>
          <span v-else>Show Age</span>
        </b-button>
      </template>
    </b-table>
  </div>
</div>

【讨论】：