Javascript 如何处理vue js模板中不存在的变量？

在我的vue.js模板中，我有许多

{{ jobs[0].stages[0].node.name }}

类似的。如果作业没有任何阶段，则整个模板将无法加载，vue.js admin会向我发出以下警告

Error in render: "TypeError: Cannot read property 'node' of undefined"

是否有一种方法可以更优雅地处理此问题，例如，如果阶段或节点不存在-模板将继续加载，并且此值将替换为“N/a”或类似值

---

我希望解决方案可以是模板本身，而不是一些复杂的js（我是js新手，所以对我来说很复杂）

好吧，所以我将基于这样的事实来回答这个问题：

<div>{{ jobs[0].stages[0].node.name }}</div>

以下是文档：

如果要在模板中执行此操作，可以这样做，但这样做相当难看：

{{jobs[0]&&jobs[0]。stages&&jobs[0]。stages[0]&&jobs[0]。stages[0]。node.name}

您需要添加更多或更少的

&&

条件，这取决于您对嵌套属性的存在有多偏执。例如，如果您认为所有数据都存在，或者stages数组为null/未定义，则可以这样编写：

{{jobs[0]。stages&&jobs[0]。stages[0]。node.name}

相反，我建议使用computed属性来应用必要的保护，这样模板就不会一团糟。获取可能不存在的deep属性的常用函数是from。您可以只导入

get

，而不导入所有

lodash

，如本例所示：

<template>
  <div>{{ stageName }}</div>
</template>

<script>
import get from 'lodash/get';

export default {
  props: {
    jobs: {
      type: Array,
      required: true,
    },
  },
  computed: {
    stageName() {
      return get(this.jobs, '[0].stages[0].node.name', 'missing name');
    },
  },
};
</script>

{{stageName}}
从“lodash/get”导入get；
导出默认值{
道具：{
工作：{
类型：数组，
要求：正确，
},
},
计算：{
stageName（）{
返回get（this.jobs，'[0].stages[0].node.name'，'missing name'）；
},
},
};

---

请注意，

get

的最后一个参数是默认值。在这种情况下，如果缺少一个或多个属性，将出现“缺少名称”。

关于最后一个解决方案的问题。。我目前已经将我的道具定义为道具：['jobs']，我还需要在stageName中引用this.jobs吗？或者我可以只使用jobswhat'lodash/get'；（1） 是的，您需要在脚本中将道具引用为

this.jobs

。（2） 使用

npm i lodash安装lodash

。导入

lodash/get

意味着：“在

node\u modules/lodash

中查找get.js文件。这是一种只导入该文件而不是整个库的方法，可以使输出包保持较小。

<template>
  <div>{{ stageName }}</div>
</template>

<script>
import get from 'lodash/get';

export default {
  props: {
    jobs: {
      type: Array,
      required: true,
    },
  },
  computed: {
    stageName() {
      return get(this.jobs, '[0].stages[0].node.name', 'missing name');
    },
  },
};
</script>