[Vuejs]-Successively bind list item values, from list to page, in a layout rendered within another layout

by

1👍

✅

This happened to me when I had a router-link pointing to the same route. e.g. /products/1.

The user is able to click on the products, but if a product was
already clicked (and the component view was already loaded) and the
user attempts to click it again, the error/warning shows in the
console.

You can solve this by adding catch block.

    methods: {
        mailitemclick(id) {
            this.$router.push({
                name: 'mailcontent',
                params: {'id': id}
            }).catch(err => {});

        }
    },

But in the mail-content, you need to use watch for calling function and in mounted for first-time calling.

Temp Example – 

    data() {
        return {
            mail: {},
            test_mails: {
                12: {
                    content_mail: '<div>test 12<div>'
                },
                122:{
                    content_mail: '<div>test 122<div>'
                }
            }
        }
    },
    mounted() {
        this.mail = this.test_mails[this.$route.params.id]
    },
    watch:{
        '$route':function () {
            this.mail = this.test_mails[this.$route.params.id]
        }
    }

OR

You can use :to in list-mail to avoild click and catch – 

<q-item
    clickable
    v-ripple
    exact
    :to="'/mailcontent/'+mail.id_mail"
  >
    <q-item-section>
      <q-item-label side lines="2"> {{ mail.title_mail }}</q-item-label>
    </q-item-section>
  </q-item>


children: [
  { path: '', component: () => import('pages/Index.vue') },
  {
    path: "secondlayout",
    component: () =>  import("layouts/mail-place.vue"),
    children: [
        { path: "/mailcontent/:id",  name: 'mailcontent', component: () => import("pages/mail-content.vue") },
    ]
  }
]
👤Pratik Patel

Leave a comment