我正在使用 vue js，并尝试使用 props 从对象调用值。

我有此代码来调用 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 显示

props: {
      eyeColor: String,
      gender: String,
      hairColor: String,
      height: String,
      race: String,
      weight: String
  }

我返回的对象的眼睛颜色和头发颜色都包裹在引号中，像这样，并且除眼睛颜色和头发颜色外，所有值都显示出来，在页面加载时显示为 NaN

{
"eye-color": "Blue"
gender: "Male"
"hair-color": "No Hair"
height: Array [ "6'3", "191 cm" ]
race: "Icthyo Sapien"
}

当我加载页面时，我在控制台中收到这 2 个错误。有人能帮我了解发生了什么吗？

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.