CODEWITHSUNDEEP
javascriptvue.jsvuejs2
jusin
jusin

Reputation: 23

vue - display only if array contains an object

I have a problem in my application.

I want to display my objects only, if they aren't null. This works pretty well for the following object:

this.val.descripiton ? [
  'descripiton', {
    label: 'label.val.descripiton',
  },
] : null,

I got a string from the API and thats why it works and if it's null - it's hidden.

But for the second object, I've a problem. Here I got an array from the API. The problem is that I always get this array, also when there are no values inside.

this.val.cities ? [
  'cities', {
    label: 'label.val.cities',
    display: cities => cities.join(', '),
  },
] && this.val.cities.length > 1 : null,

I want to check if the length is more than 1, if yes, display it. If no, hide it like the description. But I always get this error message in the console:

"TypeError: Cannot read property 'length' of undefined"

What am I doing wrong?

Upvotes: 1

Views: 180

Answers (1)

Alex Shesterov
Alex Shesterov

Reputation: 27525

You've misplaced the length-check:

this.val.cities && this.val.cities.length > 1 ? [
  'cities', {
    label: 'label.val.cities',
    display: cities => cities.join(', '),
  },
] : null

Upvotes: 2

Related Questions