Is a way to v-bind data from array of objects in vue

Question

I need to render a board with a tile board to have 20x15. And on this board I need to put the creature. I have an information where put creature in this.creaturesOnBoard in gameEngine. My idea is to take X and y and check that field includes a creature in object. But i dont know how to make logic that checking every tile and adding to this tile from another object

gameBoard.vue

<template>
  <div class="container">
    <div class="wrapper">
      <h1>Player 1 vs Player 2</h1>
    </div>
    <div class="wrapper">
      <div class="board">
        <div v-for="x in gameEngine.board.boardX" :key="x">
          <div v-for="y in gameEngine.board.boardY" :key="y">
//Something like this 
            <div 
             v-if='creture with this points is in creatureOnBoardObject'
             :name='creture.name'
             :x='creature.x'
             :y='creature.y'
            ></div>
            <div
              v-else //<=if creature is not on this point them render empty field
              class="board-creature field"
              :x="`${x}`"
              :y="`${y}`"
              @click="creatureAction(x, y, $event)"
            >
              {{ x }},{{ y }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div>
        <button>Spell Book</button>
        <button @click="passCreature()">Pass</button>
        <button>Defend</button>
        <button>Run</button>
      </div>
    </div>
  </div>
</template>
<script>
import Creature from "../js/creature.js";
import GameEngine from "../js/gameEngine.js";
import Point from "../js/point.js";
import Range from "../js/range.js";
export default {
  data() {
    return {
      gameEngine: "",
      myCreature: [],
      ennemyCreature: [],
    };
  },
  created() {
    this.createGameEngineObjectAndBoard();
  },
  methods: {
    // prettier-ignore
    createGameEngineObjectAndBoard() {

        let newCreature1 = new Creature("Skeleton", 5, 4, 6, 4, new Range(1, 3));
        let newCreature2 = new Creature("WalkingDead", 5, 5, 15, 3, new Range(2, 3));
        let newCreature3 = new Creature("Wight", 7, 7, 18, 5, new Range(3, 5));
        let newCreature4 = new Creature("Vampire", 10, 9, 30, 6, new Range(5, 8));
        let newCreature5 = new Creature("Lich", 13, 10, 30, 6, new Range(11, 13));
        let newCreature6 = new Creature("BlackKnight", 16, 16, 120, 7, new Range(15, 30));
        let newCreature7 = new Creature("BoneDragon", 17, 15, 150, 9, new Range(25, 30));

        let newCreature8 = new Creature("SkeletonWarrior", 6, 6, 6, 5, new Range(1, 3));
        let newCreature9 = new Creature("Zombie", 5, 5, 20, 4, new Range(2, 3));
        let newCreature10 = new Creature("Wraith", 7, 7, 18, 7, new Range(3, 5));
        let newCreature11 = new Creature("VampireLord", 10, 10, 40, 9, new Range(5, 8));
        let newCreature12 = new Creature("PowerLich", 13, 10, 40, 7, new Range(11, 15));
        let newCreature13 = new Creature("DreadKnight", 18, 18, 120, 9, new Range(15, 30));
        let newCreature14 = new Creature("GhostDragon", 19, 17, 200, 14, new Range(25, 50));

      this.myCreature.push(newCreature1, newCreature2, newCreature3,newCreature4,newCreature5,newCreature6,newCreature7);

      this.ennemyCreature.push(newCreature8,newCreature9,newCreature10,newCreature11,newCreature12,newCreature13,newCreature14);

      this.gameEngine = new GameEngine(this.myCreature, this.ennemyCreature);
    },

gameEngine.js

import Board from './board.js';
import CreatureTurnQueue from './creatureTurnQueue.js';
import Point from './point';

export default class GameEngine {
    constructor(_myCreatures, _EnnemyCreatures) {
        this.board = new Board();
        this.queue = new CreatureTurnQueue()
        this.creaturesOnBoard = [];
        this.i = 0;
        this.putCreatureToBoard(_myCreatures, _EnnemyCreatures)
    }
    putCreatureToBoard(_myCreatures, _EnnemyCreatures) {
        this.putCreaturesFromeOneSideToBoard(_myCreatures, false)
        this.putCreaturesFromeOneSideToBoard(_EnnemyCreatures, true)

        this.queue.initQueue(this.board.map)
    }
    putCreaturesFromeOneSideToBoard(_creatures, _site) {
        _creatures.forEach(((item, index) => {
            let newPoint = new Point(_site ? 20 : 1, index + 1)
            this.board.add(newPoint, item)
            this.creaturesOnBoard.push({
                id: this.i,
                creature: item,
                player: _site ? 'ennemy' : 'player',
                x: _site ? 20 : 1,
                y: index + 1,
            });
            this.i++;
        }))
    }
    canMove(_x, _y) {
        return this.board.canMove(this.queue.getActiveCreature(), _x, _y);
    }
    canAttack(_attacker, _defender) {
        return this.board.canAttack(_attacker, _defender)
    }
    move(_targetPoint) {
        this.board.moveByCreature(this.queue.getActiveCreature(), _targetPoint)
        this.creaturesOnBoard.forEach(item => {
            if (item.creature === this.queue.getActiveCreature()) {
                item.x = _targetPoint.x
                item.y = _targetPoint.y
            }
        })
    }
    pass() {
        this.queue.next(this.board.map);
        this.board.pass(this.queue.getActiveCreature());
    }
    attack(_point) {
        this.queue.getActiveCreature().attack(this.board.getVal(_point))
    }
}

board.js

import Point from './point.js';
export default class Board {
    constructor() {
        this.map = new Map();
        this.keyArray = [];
        this.boardX = 20;
        this.boardY = 15;
    }
    add(_point, _creature) {
        this.isThatPointOnMap(_point.x, _point.y)
        this.isThisTileTaken(_point)

        this.map.set(_point, _creature);
        this.keyArray.push([_point.getX(), _point.getY()]);
        if (this.equals(this.map.get(_point), _creature.stats)) {
            throw "Exception: => Klucz nie jest równy tej wartosci która powinna byc wpisana";
        }
    }
    getVal(_point) {
        return this.map.get(_point);
    }
    getPoint(_creature) {
        for (const [key, val] of this.map.entries()) {
            if (this.equals(val, _creature)) {
                return key;
            }
        }
    }
    moveByCreature(_creature, _newPoint) {
        this.move(this.getPoint(_creature), _newPoint);
    }
    move(_point, _newPoint) {
        this.isThatPointOnMap(_newPoint.x, _newPoint.y)
        this.isThisTileTaken(_newPoint)

        let creature = this.map.get(_point);
        this.map.delete(_point);
        this.map.set(_newPoint, creature);
    }
    pass(_creature) {
        for (const [key, val] of this.map.entries()) {
            if (val === _creature) {
                this.map.delete(key);
                this.map.set(key, _creature);
                break;
            }
        }
    }
    canMove(_creature, _x, _y) {
        this.isThatPointOnMap(_x, _y)

        let pointToMoveCreature = new Point(_x, _y);
        let currentCreaturePoint = this.getPoint(_creature)

        let distanse = currentCreaturePoint.distanse(pointToMoveCreature)

        return distanse <= _creature.getMoveRange() && !this.isThisTileTaken(pointToMoveCreature);
    }
    canAttack(_attacker, _defender) {
        this.isThatPointOnMap(this.getPoint(_defender))

        let attackerPoint = this.getPoint(_attacker)
        let defenderPoint = this.getPoint(_defender)

        let distanse = attackerPoint.distanse(defenderPoint)

        return parseInt(distanse) <= 1;
    }
    reduseMovment(_creature, _x, _y) {
        this.isThatPointOnMap(_x, _y)
        let pointToMoveCreature = new Point(_x, _y);
        let currentCreaturePoint = this.getPoint(_creature)

        let distanse = currentCreaturePoint.distanse(pointToMoveCreature)

        _creature.stats.moveRange -= distanse;

    }
    isThatPointOnMap(_x, _y) {
        if (_x > this.boardX || _y > this.boardY) {
            throw "Exception: => Creature nie zostala ruszona, wskazaany pkt jest poza mapa";
        }
    }
    isThisTileTaken(_point) {
        for (const [key] of this.map.entries()) {
            if (this.equals(key, _point)) {
                // throw "Exception: => To pole jest zajete, nie mozesz tam ruszyc jednostki";
                return true;
            }
        }
        return false
    }
    equals(val, toAssert) {
        if (JSON.stringify(val) === JSON.stringify(toAssert)) {
            return true;
        } else {
            return false;
        }
    }
}

creature.js

import CreatureStatistics from "./creatureStatistics.js";
import DamageCalculator from './damageCalculator.js';
import Range from './range.js';
export default class Creature {
    constructor(_name, _attack, _armor, _maxHp, _moveRange, _damage) {
        this.stats = this.createCreature(_name, _attack, _armor, _maxHp, _moveRange, _damage);
        this.stats.currentHp = this.stats.maxHp;
        this.stats.wasCounterAttack = false;
        this.damageCalculator = new DamageCalculator();
    }
    createCreature(_name, _attack, _armor, _maxHp, _moveRange, _damage) {
        return new CreatureStatistics(
            _name || "Smok",
            _attack || 1,
            _armor || 1,
            _maxHp || 100,
            _moveRange || 5,
            _damage || new Range(1, 5)
        );
    }
    setDefaultStats() {
        this.stats.currentHp = this.getCurrentHp() != undefined ? this.getCurrentHp() : this.getMaxHp();
    }
    attack(_defender) {
        _defender.setDefaultStats();
        this.setDefaultStats();

        if (_defender.isAlive()) {
            _defender.stats.currentHp = _defender.getCurrentHp() - this.damageCalculator.calculate(this, _defender)
            if (_defender.isAlive() && !_defender.stats.wasCounterAttack) {
                _defender.stats.wasCounterAttack = true;
                this.stats.currentHp = _defender.getCurrentHp() - this.damageCalculator.calculate(_defender, this)
            }
        }
    }
    isAlive() {
        if (this.stats.currentHp > 0) {
            return true;
        }
    }
    resetCounterAttack() {
        this.stats.wasCounterAttack = false;
    }
    canCounterAttack() {
        return !this.stats.wasCounterAttack
    }
    getName() {
        return this.stats.name;
    }
    getAttack() {
        return this.stats.attack;
    }
    getArmor() {
        return this.stats.armor;
    }
    getMaxHp() {
        return this.stats.maxHp;
    }
    getCurrentHp() {
        return this.stats.currentHp;
    }
    getMoveRange() {
        return this.stats.moveRange;
    }
    getMaxRange() {
        return this.stats.maxRange;
    }
    getDamage() {
        return this.stats.damage;
    }
}

point.js

export default class Point {
    constructor(_x, _y) {
        this.x = _x;
        this.y = _y;
    }
    getX() {
        return this.x;
    }
    getY() {
        return this.y;
    }
    distanse(_point) {
        let x = Math.abs(this.x - _point.x)
        let y = Math.abs(this.y - _point.y)

        return Math.sqrt(x * x + y * y);
    }
}

Answer 1

Given that this.creaturesOnBoardObject is an array of objects containing all creatures, you could try changing this line:

  v-if='creature with this points is in creatureOnBoardObject'

To:

v-if="hasCreature(x, y)"

Where hasCreature will be a method using some:

hasCreature(x, y) {
  return this.creaturesOnBoardObject.some(creature => creature.x === x && creature.y === y);
}