时间戳

首页 > 解决方案 > 我可以使用多个空合并运算符 || 在 vue 中就像在 php 中一样？

javascript - 我可以使用多个空合并运算符 || 在 vue 中就像在 php 中一样？

问题描述

将我的代码从 php 转换为 js 时，我无法让这个位工作：

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

我尝试使用两个||

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

但是 vue 编译器只看到第一个并且在应该渲染第二个时不显示整个组件，如果我只显示第二个则悬停一切正常：

searchEntity.name || searchEntity.name_en

然而实体是多态的，它可以是这三个中的任何一个。

我不想使用 v-if，它需要重复的代码

（代码在模板中，未计算）

编辑

检查计算函数中是否存在翻译可以解决问题

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;
                }
            }

标签： javascriptphpvue.js

解决方案

JS 不会在错误项目上使用快捷方式

错误并不像 PHP 中那样虚假

您可以在前面使用三元组

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>

推荐阅读