При передаче props из parent в child, предупреждение «Избегайте мутации реквизита напрямую, так как значение будет перезаписано.»?

Question

[Yan]

Необходимо сделать пагинацию в таблице отдельным компонентом.
При передачи props в консоле предупреждение:

[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. Prop being mutated: "page"

и код и не отрабатывает.

Родительский компонент :

<v-data-table
      :page.sync="page"
>
</v-data-table>

      <template #footer="{props}">
      <PaginationTableVue
      :page="page"
      />
      </template>

Дочерний компонент:

<v-pagination
    v-model="localPage"
    ></v-pagination>

export default {
  name: 'PaginationTableVue',
  props: ['page'],
  data: () => ({
    localPage: this.page
  }),
  computed: {
    localPage: {
      get () {
        return this.page
      },
      set (localPage) {
        this.page = localPage
      }
    }
}

Comments

[Антон Шаманов]

и что тебе не понятно? там же прямым текстом написано все

[Yan]

Антон Шаманов, От души, душевно, в душу

Answer 1

[madismad]

set (localPage) {
this.page = localPage
}

в этом месте ты мутируешь пропс, чего делать нельзя. Нужно заэмиттить изменение this.$emit('update:page', localPage), а в parent компоненте прописать :page.sync

Comments

[Yan]

Спасибо добрый человек, это работает