鍍金池/ 問答/HTML/ vue列表渲染時綁定v-if條件渲染獲取對象屬性報錯

vue列表渲染時綁定v-if條件渲染獲取對象屬性報錯

解析出來的json對象:

"activity": {
        "num": 0,
        "items": []
    },
    data類數(shù)組對象下每個子對象包含一個activity屬性

vue循環(huán)綁定v-if:

/*html大致就是這樣一個結(jié)構(gòu)*/
<ul>
    <li v-for="(item,index) in list">
        ...
        <p v-if="item.activity.num!=0">123</p>
    </li>
</ul>
/*數(shù)據(jù)結(jié)構(gòu)*/
data:[{
    ...
    "activity": {
        "num": 0,
        "items": []
    },
},
{
    ...
    "activity": {
        "num": 0,
        "items": []
    },
}
]

v-if="item.activity.num"http://這里就會報錯


//vue.js:491 [Vue warn]: Error in render: "TypeError: Cannot read property 'num' of undefined"

//(found in <Root>)


what FFFFFFF!

最神奇的是我直接在js中獲?。?/p>

var a = vm.list[0].activity.hasOwnProperty("items"); 
                                console.log(a);//true
//或者
console.log(vm.list[0].activity.num);//0
//可以看出來是能夠正常獲取到的
                                

如上注釋,明明是可以獲取到的屬性,為何循環(huán)時條件渲染會報錯?
請大神賜教!

回答
編輯回答
情皺

你得好好看看教程。。。
如果你沒有事先定義 data 的屬性
比如你這里的 data.list
那么 你后面再 vm.list = listFromAPI
Vue 是不能檢測對象屬性的添加或刪除的

https://cn.vuejs.org/v2/guide...

https://cn.vuejs.org/v2/guide...

2017年3月20日 14:30
編輯回答
笑忘初

你的截圖看不到。。
猜測
你的數(shù)據(jù)是請求回來的,所以組件一開始渲染的時候數(shù)據(jù)沒有回來導(dǎo)致報錯


看到了,num不能在undefined上那個。很明顯了。你的activity是沒有存在在item上的。你仔細看下代碼,執(zhí)行v-if的item.activity.num時候,確保activity在item上

2018年8月13日 18:24
編輯回答
凝雅

可否把代碼貼完整 這個item 是在哪v-for 出來的 v-for的哪個數(shù)據(jù)

你這data定義是一個數(shù)組 你就循環(huán)data可好 list 哪來的

2017年10月16日 02:50
編輯回答
祉小皓

多半是異步取數(shù)據(jù)的問題,你這問題就這點代碼不好回答啊

2018年9月5日 13:18
編輯回答
拮據(jù)

看不全 。也是猜測

v-if="item.activity.num"http://這里就會報錯

var a = vm.list[0].activity.hasOwnProperty("items"); 
                                console.log(a);//true
//或者
console.log(vm.list[0].activity.num);//0

你上面寫的是item.activity.num 但是下面寫的是vm.list[0].activity.num 數(shù)據(jù)沒有對應(yīng) 不知道你v-if上面是不是有v-for循環(huán) 建議把問題部分貼全

2018年8月17日 14:37