vue - display only if array contains an object

Question

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?

this.cities.length should be this.val.cities.length and check in console it's array or object. — Mr. Perfectionist
– Mr. Perfectionist, Commented Nov 17, 2020 at 9:49
@Mr.Perfectionist I updated now the question. like this, I don't get anymore the error but I never got a value. So it's always hidden — jusin
– jusin, Commented Nov 17, 2020 at 10:01
I think @Alex gave you that answer. You have to put your logic before ? — Mr. Perfectionist
– Mr. Perfectionist, Commented Nov 17, 2020 at 10:10
The solution from @Alex solved the error, but the cities are now always hidden - also when the array contains objects — jusin
– jusin, Commented Nov 17, 2020 at 10:14

Alex Shesterov · Accepted Answer · 2020-11-17 10:05:07Z

2

You've misplaced the length-check:

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

edited Nov 17, 2020 at 10:05

answered Nov 17, 2020 at 9:51

Alex Shesterov

27.8k14 gold badges91 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jusin Over a year ago

with this solution, the error is solved but I it's always hidden.

Alex Shesterov Over a year ago

Could be a problem in the template or in the remaining code. Please check your template or add it to the question.

Collectives™ on Stack Overflow

vue - display only if array contains an object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related