Can I use multiple null coalescing operators || in vue just like as in php?

Question

When converting my code from php to js, I can't get this bit to work:

searchEntity.translations[0].translation ?? searchEntity.name ?? searchEntity.name_en

I tried using two ||

searchEntity.translations[0].translation || searchEntity.name || searchEntity.name_en

but vue compiler only sees the first one and does't display whole component when second should be rendered, hovever if I display just second everything works:

searchEntity.name || searchEntity.name_en

however entity is polymorphic and it can be either of those 3.

I don't want to use v-if, it will need a repetitive code

(code is in the template, not computed)

EDIT

checking if translations exists in computed function solves issue

translatedName: function () {
                if(this.searchEntity.translations) {
                    return this.searchEntity.translations[0].translation
                } else {
                    return this.searchEntity.name || this.searchEntity.name_en || this.searchEntity.translation_fallback;
                }
            }

@VLAZ https://stackoverflow.com/questions/53610622/what-does-double-question-mark-operator-mean-in-php — mplungjan, Apr 01 '20 at 06:37
@mplungjan That would be good information to put *in this question* instead of having to look it up. — VLAZ, Apr 01 '20 at 06:37
Can you explain why this code is tagged with both PHP and JS, when you only share JS code? — Nico Haase, Apr 01 '20 at 06:59
@NicoHaase it is converting JS from PHP - perhaps JS/PHP ppl had some shared knowledge of differences between PHP and JS that was not obvious — mplungjan, Apr 01 '20 at 07:02
@Lizard we need more code. As you can see, the || operator seems to work in VUE as expected — mplungjan, Apr 01 '20 at 07:03
There's ?? in JS but in cannot be used in Vue templates. The difference between || and ?? is that || is less restrictive, `searchEntity.translations[0].translation ||` will short-circuit to second part if it's falsy, i.e. empty string. Whatever your case is, it's specific to your case and values in use. Please, provide https://stackoverflow.com/help/mcve that can replicate the problem. — Estus Flask, Apr 01 '20 at 07:22
Maybe even `if (this.searchEntity.translations && this.searchEntity.translations.length)` — mplungjan, Apr 01 '20 at 07:51

mplungjan · Accepted Answer · 2020-04-01T08:02:09.877

2

JS will not shortcut on erroneous items

An error is not falsy like it seems to be in PHP

You can use a ternary in front

const searchEntity1 = {
  translations: [{
    translation: "Navn"
  }],
  name: "Nom",
  name_en: "Name"
}
const searchEntity2 = {
  translations: null,
  name: "Nom",
  name_en: "Name"
}

const searchEntity3 = {
  translations: null,
  name: null,
  name_en: "Name"
}

const getTranslation = searchEntity => {
  const translations = searchEntity.translations;
  return translations && translations.length ? 
     translations[0].translation : searchEntity.name || searchEntity.name_en;
};
new Vue({
  el: '#example',
  data: {
    name1: getTranslation(searchEntity1),
    name2: getTranslation(searchEntity2),
    name3: getTranslation(searchEntity3)
  }
})

h3 {
  margin-bottom: 5%;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>

<body>
  <div id="example">
    <p>{{ name1 }}</p>
    <p>{{ name2 }}</p>
    <p>{{ name3 }}</p>
  </div>
</body>

</html>

edited Apr 01 '20 at 08:02

answered Apr 01 '20 at 06:39

mplungjan

169,008
28
173
236

that means, that my variables are not as expected :/ – Lizard Derad Apr 01 '20 at 06:45
1

@LizardDerad re-reading and rewriting your question made me think this is a vue issue, so I changed your title and reopened – mplungjan Apr 01 '20 at 06:45
2

your code works for me too, it's probably because my vars are either nested objects of arrays, or final version is somewhat weird. After debuging I'll notify what was the issue :/ – Lizard Derad Apr 01 '20 at 07:06
@LizardDerad I made a vue version :) – mplungjan Apr 01 '20 at 07:09
@mplungjan I tested it, work fine :D But I found issue also in my code. In some cases searchEntity object has translations, but in this case it did not, that's why it crashed. In php it handles everything, if thre's issue it moves to the next variable, in js it is not equivalent – Lizard Derad Apr 01 '20 at 07:14
You mean there was a console error saying length not found on searchEntity.translations or something – mplungjan Apr 01 '20 at 07:19
almost, `Cannot read property '0' of undefined"` refering to `searchEntity.translations[0].translation` – Lizard Derad Apr 01 '20 at 07:24
to handle this I created whole computed function which checks if translation exists :/ was really hoping || will do the work – Lizard Derad Apr 01 '20 at 07:31
Yeah, I updated my code to do the same - it is easier to read – mplungjan Apr 01 '20 at 08:06

Can I use multiple null coalescing operators || in vue just like as in php?

1 Answers1