【问题标题】：VueJs + BootstrapVue: Edit object with data paginationVueJs + BootstrapVue：使用数据分页编辑对象
【发布时间】：2019-12-27 03:53:54
【问题描述】：

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

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

问题是它只适用于第一页，但所有其他页面都获取第一页的数据。

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


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

editUser 子组件

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

export default {
    props: {
        user: Object
    },
    data() {
        return {
            modalShow: false,
            editedUser: JSON.parse(JSON.stringify(this.user)),
        }
    },
    methods: {
        onSubmit(evt) {
            evt.preventDefault()
            this.$store.dispatch('editUser', {
                oldItem: this.user,
                newItem: this.editedUser
            })
            this.modalShow = false
        }
    }
}

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案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) {
           [...]
        }
    }
}

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

【讨论】：