javascript - Vue prop 在对计算函数的初始调用中未定义

Question

我有以下 Vue 组件:

Vue.component('result', {
  props: ['stuff'],
  data: () => ({}),
  template: "<img :src='tag' class='result'></img>",
  computed: {
    tag: function tag() {
      return `pages/search/img/${this.stuff.type.toLowerCase()}_tag.png`;
    }
  }
});

创建组件时，会抛出错误:

TypeError: Cannot read property 'toLowerCase' of undefined
  at VueComponent.tag

但是，当我删除对 toLowerCase() 的调用时，该方法正确执行，生成具有预期类型的​​字符串。我可以通过将文件名更改为大写字母来解决这个问题，但我宁愿理解为什么 Vue 会这样。为什么只有在调用方法时才能未定义属性？

更新:经过一些故障排除后，我发现 this.stuff.type第一次未定义 tag()被计算。调用 toLowerCase()只是在其他沉默的错误上强制出错。 props 有什么原因吗？ computed 时未定义第一次调用函数？我应该以不同的方式编写组件吗？

Answer 1

stuff当 result 时 prop 未定义组件被创建。

有两种方法可以解决此问题:

使用 v-if父组件模板中的指令以确保 stuff当 result 时有一个值创建组件:

<template>
  <result v-if="stuff" :stuff="stuff" />
</template>

或处理 stuff Prop 是 undefined在 result零件。

Vue.component('result', {
  props: {
    // Object with a default value
    stuff: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: () => ({ type: 'someType'})
    },
  },

  data: () => ({}),

  template: "<img :src='tag' class='result' >",

  computed: {
    tag: function tag() {
      return `pages/search/img/${this.stuff.type.toLowerCase()}_tag.png`;
    }
  }
})

注意: img element 是一个 void 元素，它不需要结束标记。