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

user_8120997 0
Viewed 4155

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;
                }
            }
vue.js php javascript
1 Answers

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>

user_2957830
Related