vue组件使用iframe内容不显示？

Question

组件里使用iframe内容不显示，我把链接放到独立页面，再路由跳转是可以正常显示内容的，麻烦问下这是什么问题？？？

代码如下：

父组件：

HTML：  
<div class="componentMain" ref="componentMain">
        <component :is="myComponent" ref="myComponent"></component>
      </div>

JS：
 that.myComponent = 'recommend';

子组件HTML：

 <div class="recommend">
    <iframe width="100%" height="100%" frameborder="0" name="iframe" :url="url"></iframe>
  </div>

子组件JS：

      let that = this;
      let userId = cookie.get('userId');
      let scenicId = cookie.get('scenicId');
      let businessId = that.$store.state.base.businessId;
      that.$store.dispatch('getCodeShopId').then(res => {
        if (!res.customercode || !res.shopid) {
        } else {
          that.url = `https://xxx.XXXXXXXX.html?customercode=${res.customercode}&shopid=${res.shopid}&id=${businessId}&userid=${userId}&scenicareaid=${scenicId}&type=3&source=growmoney`;
        }
      })

Answer 1

 <div class="recommend">
    <iframe width="100%" height="100%" frameborder="0" name="iframe" :src="url"></iframe>
  </div>

把 :url改为:src