Vue.js - Working with Components

Question

I am new to Vue.js . Very new so this question might sound a lot like a first graders. Forgive me.

I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue ) and let the rendering of the look/feel of the characters be done using Character.vue . The characters are created and added to the array and can be retrieved properly. Only thing is... Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined .

Help me?

Attaching files

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

You should pass a prop when using the character component:

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

I have updated the character to receive only one prop:

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

And this is the character component template with the new prop:

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