子editUser组件

Question

我是VueJS的新手，我可能在实例生命周期中错过了一些东西。实际上，我创建了一个页面，在其中我在BootstrapVue b表中列出了所有用户。对于每个用户，我都添加了通过模式来编辑/删除用户的可能性。

当我激活带有b-pagination元素和：per-page属性的分页时，我在编辑用户的模态中出现意外行为。为了仅在提交操作后修改我的用户，我在编辑模式中创建了原始用户的副本。

问题在于它仅适用于第一页，而其他所有页面都获得第一页的数据。

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
}

<b-table
    id="my-table"
    :fields="fields"
    :items="users"
    :per-page="perPage"
    :current-page="currentPage">
    <template slot="actions" slot-scope="row">
        <edit-user v-bind:user="row.item"</edit-user>
        <remove-user v-bind:user="row.item"></remove-user>
    </template>
</b-table>
<b-pagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perPage"
    aria-controls="my-table">
</b-pagination>

子editUser组件


import EditUser from "./EditUser.vue";
import RemoveUser from "./RemoveUser.vue";


export default {
  name: 'User',
  data() {
    return {
      perPage: 10,
      currentPage: 1,
      pageOptions: [5, 10, 15],
      filter: null,
      fields: [
        { key: 'name', sortable: true, sortDirection: 'desc' },
        'actions'
      ],
    }
  },
  computed: {
    ...mapGetters([
      'users',
      'error'
    ]),
    rows() {
      return this.users.length
    }
  },
  mounted () {
    this.$store.dispatch('getUsers')
  },
  components: {
    editUser: EditUser,
    removeUser: RemoveUser
  }
}

<b-button variant="info" @click="modalShow = !modalShow">Edit</b-button>
<b-modal v-model="modalShow" hide-footer title="Edit User">
     <b-form action="" v-if="modalShow">
        <b-form-group id="input-group-name" label="Name:" label-for="input-name">
            <b-form-input id="input-name" v-model="editedUser.name" required></b-form-input>
        </b-form-group>
        <b-button variant="secondary" @click="modalShow = !modalShow">Cancel</b-button>
        <b-button variant="primary" @click="onSubmit">Submit</b-button>
    </b-form>
</b-modal>

Answer 1

在打开模式后，我设法通过克隆用户对象来解决问题。

<b-button variant="info" @click="editUser(user)">Edit</b-button>
[...]

export default {
    props: {
        user: Object
    },
    data() {
        return {
            modalShow: false,
            editedUser: {},
        }
    },
    methods: {
        editUser(user) {
           this.modalShow = true
           this.editedUser = JSON.parse(JSON.stringify(user));
        }
        onSubmit(evt) {
           [...]
        }
    }
}

但是，我仍然不明白为什么前面的代码没有相同的行为。

VueJs + BootstrapVue：使用数据分页编辑对象

子editUser组件

1 个答案: