AddThis与Vue一起分享链接错误

Question

我有一个页面，它使用 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-*标签。

注意：由于AddThis需要访问cookie，而沙盒iframe禁止此操作，因此您无法在此运行StackOverflow片段。可以在https://jsfiddle.net/d1az3qb3/3/找到运行版本。请记得禁用广告拦截器以使AddThis加载。

我已尝试过的事情

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

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

问题

是AddThis出了问题，还是它与Vue不兼容，还是有办法让它正常工作？

- msiemens

Answer 1

我猜测与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>

- mathk

---

据我所见，这需要在初始化期间呈现所有链接，如果某些项目是动态加载的，则无法正常工作，这正确吗？ - msiemens

使用vuejs动态更改页面数组不是问题。只要使用push/slice等方法，该数组就是响应式的。如果这样做不起作用，那么问题可能是由于AddThis引起的。请尝试并告诉我们。如果需要，请更新您的问题。 - mathk

是的，问题出在AddThis上。如果数组发生变化，他们只记住位置并获取旧数据而不是新数据。 - msiemens

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/

- msiemens

---

这个不起作用（包括 jsfiddle），可能是由于 addthis 进行了一些更改。 - Meekohi

已经花了好几个小时在这上面。除了添加上方的“有趣的代码”之外，没有其他方法可行。只有一个问题，当使用它时整个屏幕会出现小颠簸。 :( - John T

Answer 3

我对刷新页面上所有addThis元素的解决方案并不是非常满意。对于那些寻求简洁解决方案的人来说，这里有一个构建自己的addThis按钮的API 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。

- stwilz