前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue template中包含script标签的写法

Vue template中包含script标签的写法

作者头像
javascript.shop
发布2019-09-04 16:37:47
7.1K0
发布2019-09-04 16:37:47
举报
文章被收录于专栏:杰的记事本杰的记事本

最近项目中有一段谷歌广告代码 必须放在template中,但是vue会提示报错:

  • Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as such as <script>, as they will not be parsed.

所以尝试使用 createElement 的写法,果然解决了问题。。。代码如下

代码语言:javascript
复制
<script>
  export default {
    name: 'gb-ad',
    props: {
      unit: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        // active is for fixing the bug that AD not showing when back to keep-alive page
        active: true
      }
    },
    render(createElement) {
      const self = this
      if (!this.active) {
        return
      }

      return createElement('div',
        {
          attrs: {
            id: self.unit
          }
        },
        [
          createElement('script', 'googletag.cmd.push(function() { googletag.display("' + self.unit + '"); });')
        ])
    },
    activated() {
      this.active = true
    },
    deactivated() {
      this.active = false
    }
  }
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年5月25日2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档