我正在使用vue js并尝试使用prop从对象调用值。
我有这段代码可以调用道具
<HeroAppearance
:eyeColor="HeroInfo.appearance.eye-color"
:gender="HeroInfo.appearance.gender"
:hairColor="HeroInfo.appearance.hair-color"
:height="HeroInfo.appearance.height[0]"
:race="HeroInfo.appearance.race"
:weight="HeroInfo.appearance.weight[0]"
/>
道具中的道具和道具
props: {
eyeColor: String,
gender: String,
hairColor: String,
height: String,
race: String,
weight: String
}
我要取回的对象具有像这样的qoutes包裹的眼睛颜色和头发颜色，并且所有值都显示，除了眼睛颜色和头发颜色（在加载页面时显示为NaN）
{
"eye-color": "Blue"
gender: "Male"
"hair-color": "No Hair"
height: Array [ "6'3", "191 cm" ]
race: "Icthyo Sapien"
}
当我加载页面时，在控制台中出现了这两个错误。谁能帮助我了解发生了什么事？
Property or method "color" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
和
Invalid prop: type check failed for prop "eyeColor". Expected String with value "NaN", got Number with value NaN.
您可以使用以下语法调用带连字符的对象
HeroInfo.appearance['hair-color']
HeroInfo.appearance['eye-color']
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句