Vue.js - 使用组件

Question

我是Vue.js 的新手。非常新，所以这个问题听起来很像一年级学生。原谅我。

我有App.vue 和Character.vue 设置。我想即时创建字符并将它们添加到数组中（在App.vue 中），然后使用Character.vue 完成字符外观/感觉的渲染。字符被创建并添加到数组中，并且可以正确检索。唯一的问题是...Character.vue 无法正确渲染它们，因为出于某种原因，它从数组中检索到的字符是 undefined。

帮帮我？

附加文件

App.vue

<template>
 <div>
<div class='gameHeader'>
  <h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
  <div class='gameMessage' v-for="msg in gameMessages">
    {{ msg }}
  </div>
</div>
<div class='gameMain'>
  <button @click="rollNewCharacter">Roll New</button>
  <div class="playerParty">
    <character v-for="p in playerParty"></character>
  </div>
  <div class="computerParty">
    <character v-for="c in computerParty"></character>
  </div>
</div>
<div class='gameFooter'>
  {{ gameFooter }}
</div>
</div>
</template>
<script>
 import Character from "./assets/components/Character.vue";

export default {
 components: { 'character': Character },
  data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[],   playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
  rollNewCharacter() {
    var c = Character;
    c.name = 'Usman';
    c.type = 'Warrior';
    c.mana = 100;
    c.health = 100;
    c.totalHealth = 100;
    c.totalMana = 100;
    console.log(c.name);
    this.playerParty.push(c);
    console.log(this.playerParty[0].name);        
    //this.computerParty.push(chr2);
    }
 }
}
</script>

Character.vue

<template>
  <div class="character">
    <span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
  <button @click="attack">Attack</button>
  <button @click="specialAttack">Special Attack</button>
  <button @click="heal">Heal</button>
</div>
 </div>
</template>
<script>
  export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
  attack: function(){},
  specialAttack: function(){},
  heal: function(){ alert(this.name); console.log(this);}
}
  }


</script>
<style>
</style>

Answer 1

在使用角色组件时应该传递一个prop：

<character :character="p" v-for="p in playerParty"></character>

我已将角色更新为只接收一个道具：

export default {
  props: [ 'character' ],
  methods: {
    attack: function(){},
    specialAttack: function(){},
    heal: function(){ alert(this.name); console.log(this);}
  }
}

这是带有新道具的角色组件模板：

<template>
  <div class="character">
    <span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
    <div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
    <div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
    <span class='damage'>{{ character.damage }}</span>
    <div class="actions">
      <button @click="attack">Attack</button>
      <button @click="specialAttack">Special Attack</button>
      <button @click="heal">Heal</button>
    </div>
 </div>
</template>