0

I have this code :

<child-page
    v-if="page != null"
    :page="page"
    pdf
/>
.....
data() {
  return {
    main: false,
    pageInfo: null,
  };
},
created() {
  this.updatePage();
},
computed: {
  legalPages() {
    return this.$t('pages.legal.pages');
  },
  page() {
    return this.pageInfo;
  },
},
watch: {
  $route() {
    this.updatePage();
  },
},
methods: {
  updatePage() {
    this.pageInfo = null;
    this.main = false;
    const slug = this.$route.params.page;
    if (!slug) {
      this.main = true;
      return;
    }
    this.$nextTick(() => {
      const page = this.legalPages.find((p) => p.slug === slug);
      if (page == null) return;
      this.pageInfo = {
        id: page.id,
        title: page.title,
      };
    });
  },
},

In Child Page component I have :

props: {
  page: {
    required: true,
    type: Object,
  },
  pdf: {
    type: Boolean,
    default: false,
  },
},
watch: {
  page() {
    console.log(this.page);
  },
},

I put page like a computed property, and I want to make it depends on locale. But I'm not able to watch it in child component. What I'm doing wrong ? can you help me please ?

If I modify computed to return :

page() {
    return {
      id: this.pageInfo.id,
      title: this.pageInfo.title,
      trads: this.$t('pages.legal.pages'),
    };
  },

In this case I get the object in watch, but id and title are not updated. Can you help me please ?

klsdskldsd
  • 722
  • 1
  • 8
  • 19
  • Since your `pageInfo` property is itself an object, you need to "deeply watch" it to react to changes to its properties. This answer explains: https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data/42134176#42134176 – kdau Jun 18 '21 at 21:25

0 Answers0