Using vue-disqus in vuetify v-dialog with many post in nuxt

[pang-lee]

Hello, there~! I would like to use vue-disqus in vuettify v-modal method to pop out the disqus comment broad, I have try many way (including set the identifier and url), and I heard that disqus can only render once in one url, due to the nuxt have spa after first page load, how can I re-use dispus comment broad again? by the way in the documentation that tell us use this.$disqus.rest() to reset the disqus, but I console.log( this.$disqus.reset() ) it appear .rest is not a function.

sorry for ugly source code, I am new to post issue on github

Expected:
I have many posts in one page, and every post have a small button to open a dialog which can send comment ( which means that we won't change site and url, so it is like a SPA page, so I add the # after it to distinguish every post comment ), and I use v-for to render every post,

Reality:
Only the first post's modal have the disqus comment broad pop out, the rest of will leave a blank.

Here's my code:
(In template part ...)
<v-btn depressed color="blue darken-1" :ripple="false" text small @click="comment_area()" :href="'#' + card.id">
<v-icon id="comment">{{ comment }}</v-icon>
</v-btn>
<v-dialog v-model="dialogcomment" overlay-opacity='0.5' scrollable eager>
<v-card>
<v-btn class="mt-2" @click="dialogcomment = false" icon large absolute right>
<v-icon>{{ clear }}</v-icon>
</v-btn>
<v-card-title>
<p>Comment</p>
</v-card-title>
<v-card-text>
<client-only>
<Disqus :pageConfig="pageConfig" />
</client-only>
</v-card-text>
</v-card>
</v-dialog>

(in script part ...)

data () {

return {

  ....

  pageConfig: {
    title: this.post.title,  --> (use props to get the post)
    url: this.$route.fullPath,  --> (set url with $route, and due to I heard can only use one time, so I tried to set the url by using :href = "'#' + post.id" to change the url  and hope it can work, but fail.)
    identifier: this.post.id,
  }
}

},

methods:{

...

comment_area(){
this.dialogcomment = true --> (to open the different dialog with button)
this.$disqus.reset() --> (I see that in Disqus official documentation use reset to reload the broad again, but this code will get .reset is not a funcion)
}

}

// DISQUS.reset({
//   reload: true,
//   config: this.pageConfig
// })  --> (this is the Disqus offical documentation told that how we should Using Disqus on AJAX sites )

// console.log(this.$disqus.reset)  --> (It will output null in the console)

[Alan Ktquez]

Hi,
You can try to use history mode, using hash mode, Disqus doesn't work correctly.

---

this.$disqus.reset() only works when you use Vue.use(VueDisqus).
If Disqus component was registered locally, use ref:

<Disqus :pageConfig="pageConfig" ref="disqus" />

To access the method this.$refs.disqus.reset()

[pang-lee]

Sorry for really ugly source code again.

I actually follow the guideline register as global(using nuxt plugin and shortname also), I can access this.$disqus will output an object without errors, and the output is { 'shortname':'my_shortname'，'reset': null }.

I have already set the router to history mode, but the critical points right now is that I use javascript dialog, so the URL won't change ( If I disable # behind, the route would always be local host:3000/, no matter which post's comment have been click), and the problem are same at above image, only first dialog have comment broad.

Is the Disqus only can render once in single URL true?

So, Could you give me some suggestions on that problem?

Thanks for help!!!

[Alan Ktquez]

@pang-lee
Can you reproduce this example online?

---

Checks whether pageConfig is correctly modifying the data each time you open the modal (dialog) and performs a reset each time it opens.

[pang-lee]

Do you mean like this?

I add # behind the URL is that I heard need to change the site URL so that the disqus can reload again, but it fail.

I do set up the pageConfig in my code, and I assign the identifier with post's id, and url with $route.fullPath ( current route ).

[pang-lee]

Oh Yes, I fixed this problem by using history mode in URL, Thank's your patient and instruction!!!