AddThis 与 Vue 共享错误链接

Question

所以我有一个页面使用 AddThis 进行 link 共享并使用 Vue 进行渲染。现在，该页面显示一个包含多个页面的 link 列表。在第一页上，所有共享都按预期工作，但在第二页上，它使用第一页中的 links。

重现这个的例子：

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-* 标签

注意：您不能真正运行这里的 Whosebug 片段，因为 AddThis 想要访问沙盒 iframe 禁止的 cookie。运行ning 版本也可以在 https://jsfiddle.net/d1az3qb3/3/ 找到。请记住禁用广告拦截器以让 AddThis 加载。

我已经尝试过的

运行 addthis.layers.refresh() 切换页面后
运行 addthis.toolbox('.addthis_inline_share_toolbox')

（直接和在 this.$nextTick(() => …) 中）

问题

AddThis 是否刚刚损坏，是否与 Vue 不兼容，或者是否有办法让它工作？

Answer 1

我想 AddThis 有问题我建议您渲染所有 link 并使用 v-show 隐藏您不感兴趣的 link。

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>

Answer 2

因此，经过数小时的深入研究，它似乎在销毁并重新初始化所有 AddThis 层（使用 SmartLayer API）后像这样工作：

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;
      }

      this.$nextTick(() => {
        // The interesting bit:
        const destroyLayers = layers => layers.destroy();
        destroyLayers.pi = true;  // Somehow needed by AddThis

        addthis.layers(destroyLayers);
        addthis.layers.refresh();
      });
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="sharer" v-for="item in items">
    <div class="addthis_inline_share_toolbox_ctwk" :data-url="item.url" :data-title="item.title">{{ item.title }}</div>
  </div>
  <button @click="switchPage">Switch pages</button>
</div>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-57f620a4f185d54b"></script>

对于功能齐全的 JSFiddle，请参阅 https://jsfiddle.net/msiemens/82ysztk9/1/

Answer 3

我对刷新页面上所有 addThis 元素的解决方案不是很满意。对于正在寻找干净解决方案的任何人，这里有一个 API 用于构建您自己的 addThis 按钮 https://www.addthis.com/academy/addthis-core-share-follow-api/

你可以用类似的东西来实现它。

<script>
  export default {
    methods: {
      bindAddThis() {
        this.$nextTick(() => {
          window.addthis.share({
            container_selector: ".content--sharing-icons",
            button_selector: ".addthis_share_button"
          });
        });
      }
    },
    afterUpdate() {
      this.bindAddThis();
    },
    mounted() {
      this.bindAddThis();
    }
  };
</script>

遗憾的是 addThis API 没有将元素作为选择器，因此您不能使用 $refs.

AddThis 与 Vue 共享错误链接

AddThis with Vue shares wrong links

javascript

addthis

vue.js

我已经尝试过的

问题