Question

我开始使用vue-bootstrap生成包含项目的表。 “操作”列之一包含按钮，用于根据项目ID显示，编辑和启用/禁用项目（将活动属性更改为true / false）。

当我禁用某个项目（单击“禁用”按钮）时，该表将更新并且不再显示它，但是该特定项目的按钮（显示/编辑/禁用/启用）看起来停止工作（例如，能够启用该项目或对其进行编辑）。此外，表中的第一项也没有按钮功能。

项目示例： {id：“ 1”，键：“ key1”，名称：“ name1”，描述：“ description1”，有效：“ 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>

Answer 1

我没有直接从按钮上调用模态，而是将触发器移到一个方法上，它解决了这个问题。

<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引导程序-当表格更改项目时，按钮似乎没有更新

1 个答案: