在对计算函数的初始调用中未定义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

默认情况下是道具，null但您可以给它们提供默认值来克服此问题。

例子 ：

Vue.component('result', {

  props: {

    stuff: {

      type: Object,

      default: {

        type: ''

      }

    }

  },

  data: () => ({}),

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

  computed: {

    tag: function tag() {

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

    }

  }

});

Answer 2

所述stuff的支柱时未定义result被创建部件。

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

使用v-if父组件模板中的指令来确保stuff在result创建组件时具有一个值：

<template>

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

</template>

或处理stuff道具是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元素是一个void元素，它不需要结束标签。