在VueJS中使用props和v-bind问题

Question

这可能是一个简单的修复，但我不是来自javascript背景，而且我在飞行中学习很多。道具和所有爵士乐并不是我完全理解的东西（还有！）。

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

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

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

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

它被传递到组件＆＃34; health＆＃34;如下：

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

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

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

我的导出部分是：

export default {

道具：[＆＃39;健康＆＃39]，   名：＆＃34;健康＆＃34;

但是我没有显示任何内容。然而，我可以展示的只是{{health}}。返回完整的数组。我是否错误地访问了这些值？

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

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

Answer 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>

Answer 2

自＆＃34;健康＆＃34;是一个数组，您不能通过点符号访问项目，该符号适用于对象，而不是数组。

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

health[0].playerHealth 

简单地说，你到达数组中某个对象的某个元素，然后通过点符号访问它的属性。 但我宁愿选择计算属性来使代码更清晰，因为它们的设计目的是输出基于props的转换数据。