search

Home  >  Q&A  >  body text

javascript - The initial loading of Baidu sharing in the vue component failed?

I use Baidu Sharing in my vue project, the code is as follows
template

js (put in created)

When loading for the first time, the button images shared by Baidu are not displayed. F12 found that the class and click events did not take effect.
After refreshing, it will be displayed normally.

在mounted中使用this.$nextTick,也有点问题

mounted() {

        let _this = this;
        this.$nextTick(function () {
            window._bd_share_config = {
                common : {
                    bdText : _this.art.title,
                    bdDesc : _this.art.abstract,
                    bdPic : "http://www.jubao56.com/upload_admin/2016-07-05%2010:08:50-banner4_m.jpg",
                },
                share : [{
                    tag:"share_0",
                    bdSize : 24
                }],
            };
            const s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
            document.body.appendChild(s);
        })
    },
PHP中文网PHP中文网2732 days ago942

reply all(1)I'll reply

  • PHP中文网

    PHP中文网2017-06-28 09:28:32

    js is written in the mounted event, this.$nextTick(() => { ...... });

    The js shared by Baidu may be executed immediately and find DOM elements.
    When the created event is triggered, the DOM does not exist

    reply
    0
  • Cancelreply