Vue.js 中的参数验证答案

【问题标题】：Parameters validation in Vue.jsVue.js 中的参数验证
【发布时间】：2021-07-13 16:46:52
【问题描述】：

我是 Vue.js 的新手，我正在尝试验证我想要输出的参数。

我在一行中有一个标题，其中有 3 个数据块。

职称：“姓名：约翰·史密斯，国家：意大利，职位：CEO”

数据来自 db，我需要验证，因此如果任何数据锁为 null，则它不会出现在标题中。例如，如果缺少工作，则标题将为“姓名：约翰·史密斯，国家/地区：意大利”

我可以这样做吗？

【问题讨论】：

标记到底是什么？如果它们是不同的元素，这通常使用 v-if 完成。
If 语句正在转义整个验证链一次 if 语句为真。所以如果在这里不起作用。 John Smith, Italy 和 CEO 是这里的参数，如果它们不是空值，则应进行验证
我的意思是通常它被解决为<span v-if="name">Name: {name}</span>。如果它应该是带有逗号的单个字符串，则将其与条件连接起来。这是不特定于 Vue 的常规 JS 任务。

【解决方案1】：

v-if 常用于此：

<span v-if="user.name">Name: {user.name}</span>
...

使用内联元素可以将其呈现为单行。

如果需要用逗号连接字段并且一行不需要额外的标记，则可以有条件地连接它并且可能是计算属性：

return [
  user.name && `Name: ${user.name}`,
  ...
].filter(Boolean).join(', ');

【讨论】：