VueJS 中的 props 和 v-bind 问题答案

【问题标题】：Issue with props and v-bind in VueJSVueJS 中的 props 和 v-bind 问题
【发布时间】：2018-01-31 22:47:34
【问题描述】：

这可能是一个简单的解决方法，但我不是来自 javascript 背景，并且正在快速学习。所以道具和爵士乐并不是我完全理解的东西（还没有！）。

我想显示这个数组中的特定键：值对：

health: [{ playerHealth: 100}, {monsterHealth: 100}]

这段代码可以在 App.vue 的 data() 部分找到，默认导出如下：

data() {
return {
  health: [{
    playerHealth: 100
  }, {
    monsterHealth:100
  }]

传入组件“health”如下：

<health :health="health"></health>

在 health.vue 中，我尝试显示 playerHealth 值，我尝试的方式如下模板：

<div> {{health.playerHealth}} </div>

我的导出部分是这样的：

export default {

道具：['健康']，名称：“健康”

但是我什么也没显示。然而，我可以显示的只是 {{health}}。这将返回完整的数组。我是否错误地访问了这些值？

任何帮助将不胜感激我知道这可能是一件简单的事情，但我还没有找到答案。

如果您需要每个 vue 文件的完整代码，请告诉我。

【问题讨论】：

【解决方案1】：

health 实际上是一个包含n 对象的数组。在您的情况下，计算属性将对您有所帮助

<health :health="health"></health>

这很好，现在在该组件中，定义一个计算方法，该方法将为您提供来自数组的真实健康状况：

computed: {
  playerHealth() {
    return this.health[0].playerHealth
  }
}

你可以使用mustache语法，也可以使用v-text：

<div v-text="playerHealth"></div>
<div> {{ playerHealth }} </div>

【讨论】：

【解决方案2】：

由于“健康”是一个数组，因此您无法通过适用于对象而非数组的点表示法访问项目。

您可以使用如前所示的计算属性。或者你也可以这样尝试：

health[0].playerHealth

简单地说，你到达数组中的某个元素，它是一个对象，然后通过点符号访问它的属性。但我宁愿使用计算属性来使您的代码更清晰，因为它们旨在输出基于道具的转换数据，例如。

【讨论】：