Методы объекта в данных vue js

Question

Я пытаюсь сделать небольшую игру с Вуэйсом. Проблема в том, что я хочу инвентарь и добавляю в него предметы. Каждый объект должен иметь свое собственное действие, например, лечить зельем. Поэтому я пытаюсь сделать следующее, но я думаю, что это невозможно сделать с помощью Vue, но я не могу найти решение.

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;
    }
}
});

Метод действия не работает, я пробовал с этим ключевым словом и с двойными кавычками и тоже не работает. В html я звоню по:

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

Другая проблема - это сумма, я хотел бы, чтобы действие функции уменьшило сумму, но я не могу сослаться на этот объект. Спасибо!

Answer 1

Вы можете попытаться позвонить action :

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

или используйте объект напрямую:

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

Answer 2

Избегайте использования .find и сделайте ваши массив и объект

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

Чтобы получить доступ к действию зелья:

inventory.potion