VueJS JavaScript JS判断国家地区

为了响应政策，有时候我们需要国家地区动态加载一些组件。

components -> template里：

<div v-if="isShow[0].status" class="container">bulabula</div

components -> script里：

data() {
  return {
    isShow: [{status: true}] // 配合$set
  }
},
created() {
  this.getIp(function (info, self) {
    if (info.country === '中国') {
      self.$set(self.isShow, 0, false)
    }
  })
},
methods: {
  getIp(cb) {
    let script = document.createElement("script"),
      s = document.getElementsByTagName("script")[0];

    script.src = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js";
    s.parentNode.insertBefore(script, s);

    let self = this // 进入setInterval后，this是setInterval本身了，而不是vue实例了
    let it = setInterval(function () {
      if (typeof(remote_ip_info) !== 'undefined') {
        try {
          cb(remote_ip_info, self);
        } catch (error) {
          console.log(error)
        }

        clearInterval(it);
        it = null;
      }
    }, 100);
  }
}

两个坑：

1、 传入setInterval中的callback，调用this时不是vue实例，需要在setInterval外面将this赋值给其他名字的变量；
2、 直接修改变量，有时候在组件那没有响应，需要使$set，而使用这个传入值必须是对象。

The end.