Vue-bootstrap - when table changes items, buttons do not seem be to updated

Question

I started using vue-bootstrap to generate a table with items. One of the columns "actions" contains button to show, edit and enable/disable the item (changing active property to true/false) based on item ID.

When I disable an item (click the button disable), the table is updated and does not show it anymore, however it looks like the buttons (show/edit/disable/enable) for that particular item stop working (e.g. not able to enable the project back or to edit it). Also the first item in the table does not have the buttons functional.

Item example: { id: '1', key: 'key1', name: 'name1', description: 'description1', active: 'true' }

Any idea what could be wrong?

<b-row class="mb-3">
  <b-col cols="12">
    <b-navbar type="light" variant="light">
      <b-nav-form>
        <i class="fas fa-search mr-3"></i>
        <b-input-group>
          <b-form-input v-model="filter" id="filterInput" placeholder="Search" ></b-form-input>
          <b-input-group-append>
            <b-button :disabled="!filter" @click="filter = ''" class="mr-sm-3">Clear</b-button>
          </b-input-group-append>
        </b-input-group>
        <b-form-checkbox v-model="archivedChecked" size="sm">
          Archived
        </b-form-checkbox>
      </b-nav-form>
    </b-navbar>
  </b-col>
</b-row>

<b-row>
    <b-col cols="12">
        <b-table bordered hover head-variant="dark" :filter="filter" :items="filteredProjects" :fields="fields">

            <template v-slot:cell(actions)="row">
                <b-button-group>
                    <b-button size="sm" variant="info" :to="'/msd/' + row.item.key" title="Show">Show</b-button>
                    <b-button v-b-modal="'edit-project-' + row.item.id" size="sm" variant="outline-info" :title="'Edit ' + row.item.name">
                        <i class="far fa-edit"></i>
                    </b-button>

                    <b-button v-if="!archivedChecked" v-b-modal="'disable-project-' + row.item.id" size="sm" variant="outline-secondary" title="Archive">
                        <i class="fas fa-archive"></i>
                    </b-button>

                    <b-button v-if="archivedChecked" v-b-modal="'enable-project-' + row.item.id" size="sm" variant="outline-secondary" title="Restore">
                        <i class="fas fa-trash-restore"></i>
                    </b-button>

                    <edit-project-modal :modal_id="'edit-project-' + row.item.id" :id="row.item.id" />
                    <disable-project-modal :modal_id="'disable-project-' + row.item.id" :id="row.item.id"/>
                    <enable-project-modal :modal_id="'enable-project-' + row.item.id" :id="row.item.id"/>

                </b-button-group>
            </template>
        </b-table>
    </b-col>
</b-row>

</div>
</template>

<script>
import EditProject from '~/components/modal/EditProject.vue'
import DisableProject from '~/components/modal/DisableProject.vue'
import EnableProject from '~/components/modal/EnableProject.vue'

import { mapGetters } from 'vuex'

export default {
    layout: 'IncludeSidebar',
    data() {
      return {
        fields: [
          {
            key: 'key',
           sortable: false
          },
          {
            key: 'name',
            sortable: true
          },
          {
            key: 'description',
            sortable: true
          },
          {
            key: 'actions',
            sortable: false
          }
        ],
        archivedChecked: false,
        filter: null
      }
    },
    computed: {
      loadedProjects() {
        return this.$store.getters.loadedProjects;
      },
      filteredProjects() {
        if (this.archivedChecked) {
          return this.loadedProjects.filter(item => item.active === false)
        } else {
          return this.loadedProjects.filter(item => item.active === true)
        }
      }
    },
    methods: {

    },
    components: {
      NewProjectModal: NewProject,
      EditProjectModal: EditProject,
      DisableProjectModal: DisableProject,
      EnableProjectModal: EnableProject
    }
}
</script>

Miroslav Miroslav · Accepted Answer · 2019-10-11T15:13:09

Instead of calling the modals directly from buttons, I moved the trigger to a method and it solved the issue.

<b-button v-if="row.item.active" @click="showModal('disable-project-' + row.item.id)" size="sm" variant="outline-secondary" title="Archive">

methods: {
  showModal(type, modal_id) {
    this.$root.$emit('bv::show::modal', modal_id);
  }
}

Vue-bootstrap - when table changes items, buttons do not seem be to updated

1 Answers