Object methods in vue js data

Question

I'm trying to do a little game with Vuejs. The problem is that I want an inventory, and add objects to it. Each object must have its own action, for example potions heal. So I'm trying to do the following, but I think this cannot be done with Vue, but I do not find a solution.

new Vue({
el: '#app',
data: {
    playerHealth: 100,
    enemyHealth: 100,
    invClicked: false,
    gameStarted: false,
    logs: [],
    specialAttacks: [],
    inventory: {
        potion: {
            amount: 1,
            img: 'images/potion.svg',
            action: function(){
                this.playerHealth = this.playerHealth + 25;
            }
        }
    }
},
computed: {
    eHealthColor: function() {
        if (this.enemyHealth < 25){
            return 'red';
        }
    },
    pHealthColor: function() {
        if (this.playerHealth < 25){
            return 'red';
        }
    },
    numberOfPlayers: function() {
        return 2;
    }
},
methods: {
    attack: function(event) {
        let dealedDamage = (Math.floor(Math.random() * (5 - 1)) + 1);
        let damageTaken = (Math.floor(Math.random() * (3 - 1)) + 1);

        if(this.enemyHealth > dealedDamage){
            this.enemyHealth = this.enemyHealth - dealedDamage;
            this.logs.unshift(`PLAYER HITS ENEMY FOR ${dealedDamage}`);
        } else {
            this.enemyHealth = 0;
            alert('YOU WON!')
        }

        if(this.playerHealth > damageTaken){
            this.playerHealth = this.playerHealth - damageTaken;
            this.logs.unshift(`ENEMY HITS PLAYER FOR ${damageTaken}`);
        } else{
            this.playerHealth = 0;
            alert('YOU LOST!');
        }
    },
    findItem: function() {
        var item = this.inventory.potion;
        return item;
    }
}
});

The action method is not working, I've tried with this keyword and with double quotes and do notwork either. In html I'm calling by:

<div class="inv-item position-relative d-flex justify-content-center" @click="findItem().action">

Another problem is the amount, I would like that the function action would reduce the amount, but I can't refer to that object. Thanks!

Possible duplicate of How can I run functions within a Vue data object? — Emile Bergeron
– Emile Bergeron, Commented Jul 4, 2018 at 17:37

andria_girl · Accepted Answer · 2018-07-04 12:02:12Z

0

Avoid using `.find` and make your Array and Object

inventory: {
  'potion': {
    ...
  }
}

To access the potion action:

inventory.potion

answered Jul 4, 2018 at 12:02

andria_girl

5,1043 gold badges28 silver badges41 bronze badges

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

Comments

Makarov Sergey · Accepted Answer · 2018-07-04 12:45:44Z

0

You may try to call action:

<div class="inv-item position-relative d-flex justify-content-center" @click="findItem().action()">Action</div>

or use object directly:

<div class="inv-item position-relative d-flex justify-content-center" @click="inventory.potion.action">Action</div>

answered Jul 4, 2018 at 12:45

Makarov Sergey

9327 silver badges21 bronze badges

2 Comments

Raúl S Over a year ago

Yeah, but still not working. I think the error is in the function, I do not know very well what to return

Makarov Sergey Over a year ago

@RaúlS add method action() { this.findItem().action() } and call it inside click event like @click="action". And add a code this.playerHealth = this.playerHealth + 25; this.amount++;

Collectives™ on Stack Overflow

Object methods in vue js data

2 Answers 2

Avoid using `.find` and make your Array and Object

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Avoid using .find and make your Array and Object

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Avoid using `.find` and make your Array and Object