我具有以下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
是有原因的吗?我应该以不同的方式编写组件吗?
答案 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元素,不需要结束标记。