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

默认情况下，道具为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);
    }

Answer 2

创建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元素，不需要结束标记。

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

2 个答案: