Vue-bootstrap - когда таблица меняет элементы, кнопки не обновляются - PullRequest
Новая
       95

Vue-bootstrap - когда таблица меняет элементы, кнопки не обновляются

1 голос
/ 11 октября 2019

Я начал использовать vue-bootstrap для создания таблицы с элементами. Один из столбцов «Действия» содержит кнопку для отображения, редактирования и включения / отключения элемента (изменение активного свойства на true / false) на основе идентификатора элемента.

Когда я отключаю элемент (нажимаю кнопку «отключить»), таблица обновляется и больше не отображается, однако выглядит как кнопки (показать / редактировать / отключить / включить) для этого конкретного элемента перестают работать(например, не удалось включить проект обратно или отредактировать его). Также первый элемент в таблице не имеет функциональных кнопок.

Пример элемента: {id: '1', ключ: 'key1', имя: 'name1', описание: 'description1', active:'true'}

Есть идеи, что может быть не так? 

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

1 Ответ

0 голосов
/ 11 октября 2019

Вместо того, чтобы вызывать модалы непосредственно с кнопок, я переместил триггер на метод, и это решило проблему. 

<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);
  }
}
...