VueJs + BootstrapVue: Edit object with data pagination

Question

I'm new to VueJS and I probably missed something in the instance lifecycle. Actually, I created a page where I list all my users in a BootstrapVue b-table. for each users, I added the possibility to edit / remove the user through a modal.

When I activate pagination with b-pagination element and :per-page attribute, I have an unexpected behavior on my modal to edit the user. In order to modify my user only after submit action, I create a clone of the original user in the edit modal.

The problem is it works only for the 1st page, but all others pages get the data of the 1st 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
  }
}

The child editUser component

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

Chup4Chups Chup4Chups · Accepted Answer · 2019-08-22T08:14:19

I managed to fix my issue by cloning the user object after opening the modal.

<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) {
           [...]
        }
    }
}

However, I still don't understand why the previous piece of code doesn't have the same behavior.

VueJs + BootstrapVue: Edit object with data pagination

The child editUser component

1 Answers