微信小程序-渲染层网络层错误

微信小程序-渲染层网络层错误
解决方案:

1、判断导致该错误具体代码位置

     <HomeBanner 
        img="http://www.youbaobao.xyz/book/res/bg.jpg"
        title="hello world"
        subTitle="立即体验"
        @onClick="onBannerClick"
      />

{注释有可能出现错误的代码片段,查看该错误提示是否还存在}

2、找到错误代码片段,查看DOM结构
微信小程序-渲染层网络层错误

初次加载img 为 undefined

3、可以通过计算属性来消除错误

原代码片段

    <div 
      class="bg-img"
      :style="{backgroundImage:'url('+img+')'}"
    >
      <div class="title">{{title}}</div>
      <div class="sub-title">{{subTitle}}</div>
    </div>

使用computed计算属性更改后代码片段

    <div 
      class="bg-img"
      :style="{backgroundImage:bgImage}"
    >
      <div class="title">{{title}}</div>
      <div class="sub-title">{{subTitle}}</div>
    </div>
  computed:{
    bgImage(){
      return 'url('+this.img+')'
    }
  },

保存代码,成功消除错误。

上一篇:These styles are computed, and therefore the ‘visibility‘ property is read-only.“


下一篇:Vue进阶(幺肆捌):Vuex辅助函数详解