[Vuejs]-How to close previous row after clicked view details of new row

by

0👍

This should give you some idea about how to implement this feature. You need to create your own custom method and not use the toggleDetails method here.

new Vue({
  el: '#app',
  data() {
    return {
      fields: ['first_name', 'last_name', 'show_details'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson',
          _showDetails: true
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  methods: {
    clickOnRow(item) {
      this.items.forEach((element) => {
        this.$set(element, "_showDetails", false)
      })
      this.$set(item, "_showDetails", !item._showDetails)
    }
  },
  mounted() {},



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

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields" striped responsive="sm">
    <template #cell(show_details)="{ item }">
        <b-button size="sm" class="mr-2" @click="clickOnRow(item)">
          {{ item._showDetails ? 'Hide' : 'Show'}} Details
        </b-button>
      </template>

    <template #row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>
        </b-card>
      </template>
  </b-table>
</div>

Leave a comment