muhimasri
commented
2 years ago Hi @zms2003 , thanks for opening an issue.
I am aware that the @input-change event triggers on every keypress. I'm currently working on new enhancements that include changes in input events; @change will trigger only when changing and leaving the input field, and @input trigger on keypress. I believe that will solve the issue that you are facing.
I will release the latest changes in the coming two days. So please stay tuned, and I will notify you as soon as it's up and running! If you need to get something working now, consider using a debounce function so your API does not trigger on every keypress. https://stackoverflow.com/questions/42199956/how-to-implement-debounce-in-vue2
Also, new changes will include a row update option. Meaning you can use an external button to update specific rows. That will be more efficient for API calls as you only trigger an update when clicking on a "save" button.
Lastly, I noticed that you are getting the field name "field:data.field.value," it should be "field:data.field.key" instead.
Cheers, Muhi
zms2003
Hello. How I can update data by restAPI fron this component? When I take a handler input-change, handler is working on any symbol what I press. How I can use b-editable-table whith update by restAPI?
handleInput(value, data) { this.users_table_busy=true const payload={ id: data.item.id, field:data.field.value, value:value } this.$store.dispatch('user_actons/UPDATE_USER', payload).then( data => { this.message = data.message; this.successful = true; if (this.message=="success"){ this.$store.dispatch('user_actons/GET_USERSLIST', ).then( res=>{ console.log(res) this.items = this.$store.getters['user_actons/USERS_LIST'] }).catch(err=>{ throw err }) } }, error => { this.message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); this.successful = false; } ); this.users_table_busy=false }