所以我有一个页面使用 AddThis 进行链接共享并使用 Vue 进行渲染。现在,该页面显示包含多个页面的链接列表。在第一页上,所有共享都按预期工作,但在第二页上,它使用第一页中的链接。
重现这个的例子:
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>
在第一页上时,AddThis 正确共享 Google 主页。但是在第二页时,它不会选择用于共享 Yahoo 的 data-*
标签。
注意:您不能真正在此处运行 StackOverflow 片段,因为 AddThis 想要访问沙盒 iframe 禁止的 cookie。也可以在 https://jsfiddle.net/d1az3qb3/3/ 找到运行版本。 .请记住禁用广告拦截器以加载 AddThis。
我已经尝试过的
- 切换页面后运行
addthis.layers.refresh()
- 运行
addthis.toolbox('.addthis_inline_share_toolbox')
(直接和在 this.$nextTick(() => …)
中)
问题
AddThis 是否刚刚损坏,是否与 Vue 不兼容,或者是否有办法让它工作?
最佳答案
我想 AddThis
有问题我建议您呈现所有链接并使用 v-show 隐藏您不感兴趣的链接。
new Vue({
el: '#app',
data: {
pages: [
{
url: 'http://google.com',
title: 'Google',
id: 1
},
{
url: 'http://yahoo.com',
title: 'Yahoo',
id: 2
}
],
currentPage: 0
},
computed: {
selectedItem() {
return this.pages[this.currentPage].id
}
},
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 pages">
<div v-show="item.id === selectedItem" 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>
关于javascript - AddThis 与 Vue 共享错误链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48343258/