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>

Nora · Accepted Answer · 2017-01-01 17:23:50Z

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>

answered Jan 1, 2017 at 17:23

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1872371 Over a year ago

Apologies. My bad. It works. You the man or woman, whatever the case may be. Thanks.

Collectives™ on Stack Overflow

Vue.js - Working with Components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related