Javascript VueJS中的道具和v-bind问题

这可能是一个简单的解决方案，但我不是javascript背景，我正在学习很多东西。所以道具和爵士乐并不是我完全理解的东西

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

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

这段短代码位于App.vue的data（）部分，导出默认值如下：

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

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

它被传递到组件“health”中，如下所示：

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

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

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

然而，我没有得到任何显示。然而，我能显示的只是{{health}。返回完整数组。我是否访问的值不正确

我知道这可能很简单，但我还没有找到答案

---

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

运行状况实际上是一个包含

n

对象的数组。在您的情况下，计算属性将对您有所帮助

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

您可以在

mustache

语法中使用它，也可以使用

v-text

：

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

{{玩家健康}

由于“运行状况”是一个数组，您无法通过适用于对象而非数组的点符号访问项目

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

health[0].playerHealth 

简单地说，您可以到达数组中的某个元素，它是一个对象，然后通过点符号访问它的属性。

---

但我更愿意使用计算属性，以使代码更干净，因为它们的设计目的是基于道具输出转换后的数据

我想你应该把

health

做成一个字典，而不是两个字典的数组。谢谢你。最后一个问题是，在我结束之前，我应该如何更新/修改此值？再次感谢。@dwalsh如果您想更新它，那么我将创建一个自定义函数，该函数接受（对象的，数组中的）索引、键和值。然后相应地对其进行变异。

health[0].playerHealth