问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue从后台获取到数据并已渲染元素但还是报null错误

头像
演绎那段情
    65831203293

    我定义了一个方法fetchAssetDetail 在created里调用 从后台获取到数据 是一个对象 然后赋值给assetDetail
    在模块里通过判断assetDetail的属性assetType来加载对应的元素 明明assetDetail有assetType这个属性 也有值 元素也加载出来了 但是控制台还是报错
    webpack-internal:///5:572 [Vue warn]: Error in render: "TypeError: Cannot read property 'assetType' of null"

    这可能是哪里出问题了呢

    <p v-if="assetDetail.assetType == 1">房产</p>
    <p v-else-if="assetDetail.assetType == 2">车辆</p>
    <p v-else-if="assetDetail.assetType == 3">信用贷</p>

    export default {
    data() {

     return {
    assetDetail: null
 }

    }，
    created() {

              this.fetchAssetDetail(storageUtil.get('bidId'))

    }，
    methods: {

    fetchAssetDetail(bidId) {
            //let bidId = storageUtil.get('bidId')
            let params = { bidId: bidId}
            product.getAssetDetail(params).then((res) => {
                storageUtil.set('pics', JSON.stringify(res.data.pics))
                this.assetDetail = res.data
                this.assetDetail.repayGuarantee = this.assetDetail.repayGuarantee.split('\r\n')
            })
        }

    }
    }

    vue.js
    阅读 11.8k
    3 个回答
    得票最新
    头像
    拾指相扣
      3.3k2417
      ✓ 已被采纳

      问题在这里啊，你初始赋值的assetDetail是null，初始渲染读取assetDetail.assetType当然是Cannot read property 'assetType' of null"，解决办法是，给assetDetail初始赋值{}，或者template模板里类似读取assetDetail的父元素都加一个一个v-if="assetDetail != null"

      <p v-if="assetDetail.assetType == 1">房产</p>
<p v-else-if="assetDetail.assetType == 2">车辆</p>
<p v-else-if="assetDetail.assetType == 3">信用贷</p>
      头像
      Aria
        96222036

        这个问题应该是assetDetail没有动态设置的问题。

        你在一开始就设置的null,虽然在方法里进行了重新赋值，但是不会动态的渲染到页面。

        所以

        this.assetDetail = res.data

        改成

        this.$set(assetDetail,res.data)

        这样应该就可以了

        头像
        kaim
          44422136
              data() {
      return {
        creditCompany: {
          mobileNew: '',//预留手机号后三位
          switchFlagNew: 1,
          signArry: []//签名数组
        },
        countDownText: '发送验证码',//倒计时文字
        showImageVerifyCode: false,//是否显示图片验证码
        timer: '',//定時器
      }
    },

          因为你在created里用的异步请求，所以需要给用到的值都初始化下，不然就会提示报错了，
          可以复制下面代码试下

          <div id="app">
    <div v-for="i in a.b.c"></div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                a: ''
            }
        },
        created() {
            setTimeout(()=>{
                this.a = {b: {c: ''}}
            },0)
        }
    })
</script>
          <body>
<div id="app">
    <div v-for="i in a.b.c"></div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                a: ''
            }
        },
        created() {
            this.a = {b: {c: ''}}
        }
    })
</script>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题