将我的代码从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;
}
}
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句