Vue/js 先判断一个数组/对象有没有这个字段再判断有没有值

Question

let data = {
    icon: null,
}

let data1 = {
    avatar: '/4399.jpg'
}

代码如上所示，如何用一句代码判断出有icon（或者avatar）这个字段，但icon里没有值，是写在vue的v-if里的

我的错误代码↓

v-if="!data.avatar || !data.Icon"

因为这个data不是固定的，里面有avatar字段的话就没有Icon，所以这样子判断是不行的

在这里先感谢各位大哥大姐的解答了，小弟感激不尽！

Answer 1

像你那样直接写如果不含该字段会报undefined的错误。要用object的hasOwnProperty()方法判断是否含有该字段。

v-if="data.hasOwnProperty('icon')&&!data.icon"    // 有icon字段但该字段值为null

Answer 2

'icon' in data && !data.icon

Answer 3

//?.有值取之，没值不报错,v-if也不会渲染该div
v-if="data?.icon"

Answer 4

题目说先判断是否有字段再判断是否有值，因为data没有这个字段的话就直接返回undefined，但是你要是说除了undefined以外的值都算是有值得话就另说
那么直接就可以

data.icon || data.avatar

要是判断data里面是否有icon或者avatar得话，如下

/icon|avatar/.test(Object.keys(data))

要是初undefined以外都算是有值的话，这里装个babel8，用ES11的新特新?.比较方便，要是有这个字段返回字段值，没有就返回undefined

data?.icon==undefined?undefined:data.icon || data?.avatar==undefined?undefined:data.avatar

Answer 5

新语法：

let result = data?.avatar ?? data.icon;

如图，chrome已经支持。