I am facing an issue with my webpage that uses AddThis for link sharing and Vue for rendering. The problem arises when the page displays a list of links across multiple pages. Sharing works perfectly on the first page, but on the second page, it still shows the links from the first page.
Here is a simple example to recreate this problem:
new Vue({
el: '#app',
data: {
pages: [
[{
url: 'http://google.com',
title: 'Google'
}],
[{
url: 'http://yahoo.com',
title: 'Yahoo'
}]
],
currentPage: 0
},
computed: {
items() {
return this.pages[this.currentPage]
}
},
methods: {
switchPage() {
if (this.currentPage === 0) {
this.currentPage = 1;
} else {
this.currentPage = 0;
}
}
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="sharer" v-for="item in items">
<div class="addthis_inline_share_toolbox" :data-url="item.url" :data-title="item.title">{{ item.title }}</div>
</div>
<button @click="switchPage">Switch pages</button>
</div>
<script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-57f620a4f185d54b"></script>When I navigate to the second page, the AddThis functionality does not capture the data-* attributes for sharing Yahoo, while it works fine for Google on the first page.
Note: Due to restrictions on accessing cookies by the sandboxed iframe, the StackOverflow snippet cannot be run here. However, you can find a working version at https://jsfiddle.net/d1az3qb3/3/. Please disable any ad-blockers to allow AddThis to load.
What I have already tried
- Executing
addthis.layers.refresh()after switching pages - Running
addthis.toolbox('.addthis_inline_share_toolbox')
(Tried both directly and within this.$nextTick(() => …))
Question
Is AddThis malfunctioning, is there a compatibility issue with Vue, or is there a solution to make them work together seamlessly?