Javascript 是一种从vue中的对象数组v绑定数据的方法

我需要渲染一块带有瓷砖板的板，以获得20x15。我需要把这个生物放在这个板上。我在

gameEngine

中的

this.creatoresonboard

中有一个放置生物的信息。我的想法是取

X

和

y

并检查该区域是否包含对象中的生物。但我不知道如何使逻辑检查每个瓷砖和添加到这个瓷砖从另一个对象

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

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

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

假设this.creaturesOnBoardObject是包含所有生物的对象数组，您可以尝试更改此行：

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

致：

其中HasBiotel将是一种使用以下各项的方法：

---

Thx您的解决方案正是我想要的，但我如何将

creatureOnBoard

中的数据绑定到此元素？如果我想将

骨架

数据绑定到第一个元素或

行尸走肉

绑定到第二个元素，该怎么办？将其作为道具传递，您可以使用非常类似的方法：

方法将如下所示：

获取生物（x，y）{返回这个.creatersonboardobject.find（biote=>biote.x==x&&biote.y==y）；}

getbioter（x，y）{返回这个.gameEngine.creatersonboard.find（（bioter=>bioter.x==x&&biote.y==y）；}，

我使用了类似的东西，但这个返回

[object object object object object object object]

当我使用

getbioter（x，y）.bioter.name时，没有显示如何从中获取数据？请尝试
getbioter（x，y）.name
，find方法将返回一个对象。
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);
    }
}

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

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

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