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

时间:2019-04-12 15:26:26

标签: javascript vue.js

我具有以下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是有原因的吗?我应该以不同的方式编写组件吗?

2 个答案:

答案 0 :(得分:0)

默认情况下,道具为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`; } } }); ,但您可以为它们提供一个默认值来克服此问题。

示例:

private bool _disposed = false; // To detect redundant calls

    protected virtual void Dispose(bool disposing)
    {
        if (!_disposed)
        {
            if (disposing)
            {
                _promotionsSQLTableDependency.Stop();
                _awardsSQLTableDependency.Stop();
                _progressiveGeneratorService.OnProgressiveLevelsUpdate -= _progressiveUpdateHandler;
            }

            _disposed = true;
        }
    }

    ~PromotionHandler()
    {
        Dispose(false);
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

答案 1 :(得分:0)

创建stuff组件时,result道具未定义。

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

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

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

或处理stuff组件中的undefined的{​​{1}}道具。

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`; } } }) 元素是一个void元素,不需要结束标记。