Question

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

实例

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

和类似。如果一项工作没有任何阶段-那么整个模板将无法加载，vue.js管理员会向我发出以下警告。

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

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

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

Answer 1

好的，所以我将基于您具有这样的事实来给出此答案：

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

您可以使用v-if指令：

<div v-if="jobs[0].stages && jobs[0].stages.length">{{ jobs[0].stages[0].node.name }}</div>
<div v-else>N/A</div>

以下是文档：https://vuejs.org/v2/guide/conditional.html

Answer 2

如果想要可以在模板中执行此操作，但是这样做很丑陋：

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

您需要添加更多或更少的&&条件，具体取决于您对嵌套属性的存在是否抱有偏执。例如。如果您认为所有数据都在其中或者stages数组为空/未定义，则可以这样编写：

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

相反，我建议使用计算属性来应用必要的防护措施，以使您的模板不会一团糟。用于获取可能不存在的深层属性的常用函数是get中的lodash。您可以仅导入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>

请注意，get的最后一个参数是默认值。在这种情况下，如果缺少一个或多个属性，则会显示'missing name'。

如何处理Vue js模板中不存在的var？

2 个答案: