How can i avoid mutating the prop "currentPage"? I get:
[Vue warn]: "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value."
besitzers and count_bessis are correct passed.
It also works. The only thing, which disturbs is the above message, when i change the page.
But i can not find the right place to correct.
<template>
<div>
<b-pagination
v-model=currentPage
:total-rows=count_bessis
:per-page=5
></b-pagination>
<b-table striped hover :items=besitzers :per-page=5 :current-page=currentPage> </b-table>
</div>
</template>
<script>
export default {
props: {besitzers: {type: Array},count_bessis: {type: Number}, currentPage: {
type: Number,
default: 1
}}
}
</script>
Thanks for a little help.
@whizzly you can't mutate (via v-model in this case) a prop as said in the message.
You can rename your prop to initialPage and then use it as initial value for the currentPage data property:
export default {
props: {
//...
initialPage: {
type: Number,
default: 1
}
},
data() {
return {
currentPage: this.initialPage
}
}
}
Note: don't forget to update component's attribute from current-page to initial-page when passing initial page.
@whizzly You need to emit an event to the parent component to mutate the actual data. That or implement VueX which makes managing state a bit easier.
@sti3bas that works, thx a lot. Dont need even the prop at all.
@fylzero thx for the tip
Just a beginner, still have to learn.
@whizzly great. Yes, you don't need a prop if you don't want to pass initial value.
Please mark the best reply.
Please sign in or create an account to participate in this conversation.
