如何使用watch方法在javascript中允许或不允许将变量设置为true或false

我有一个逻辑问题

我有一个数据变量，一旦html标记中的按钮被触发，它就会设置为true或false，在单击（@click）时显示垂直（true）或水平图像（false），反之亦然

更具体地说，我正在设置战舰游戏，而船只的定位正是这个问题激增的地方

在网格容器的底部，我可以将我的船舶图像置于水平模式，因为这是允许的，但不应该转向垂直图像，因为这样它的限制将侵犯网格容器

所以基本上我想知道是否有一个大概的想法，关于如何禁止这个从真实状态转向垂直（假）数据变量，因为它在网格中的特定位置

简单地说，我只是想知道，我怎么能对“true”中的变量说，在单击时不更改为“false”，因为它的位置实际上不允许更改。 提前感谢

<div>
<template>
    <div>
            <img
              v-if="shipOrientations['Carrier']"
              id="tester5"
              class="drag5"
              src="../assets/carrierHorizontalView.png"
              draggable="true"
              data-ship-length="5"
              data-ship-type="Carrier"
              @dragstart="dragStart"
              @dragover.stop
              @click="drawShip($event, 'Carrier'), orientationShips($event)"
            />
            <img
              v-else
              id="tester6"
              class="drag5v"
              src="../assets/carrierAboveView.png"
              draggable="true"
              data-ship-length="5"
              data-ship-type="Carrier"
              @dragstart="dragStart"
              @dragover.stop
              @click="drawShip($event, 'Carrier'), orientationShips($event)"
            />
          </div>
    <v-btn @click="putShips">Play</v-btn>
    <v-btn @click="putSalvos">FIRE!!!</v-btn>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
// import tester from "../components/tester";
export default {
  name: "GamesGrid",

  props: ["gamePlayerId", "id"],

  data() {
    return {
      positionShips: [],
      opponentShots: [],

      initialDropPosition: [], /////todas las variables del drop exteriorizadas
      ship_idEx: [],
      shipEx: [],
      positionIdOfImgEx: [],
      getNumOfPositionIdEx: [],
      getStringOfPositionIdEx: [],
      ShipColorsEx: [],
      currentShipPosition: [],
      targetEx: [],
      /////objetos del ship
      shipOrientations: {
        Destroyer: true,
        PatrolBoat: true,
        Submarine: true,
        BattleShip: true,
        Carrier: true
      },

      ///////

      shipsToSendBackEnd: [
        { typeShip: "Destroyer", shipPositions: [] },
        { typeShip: "Submarine", shipPositions: [] },
        { typeShip: "PatrolBoat", shipPositions: [] },
        { typeShip: "Carrier", shipPositions: [] },
        { typeShip: "BattleShip", shipPositions: [] }
      ],

      shootToPositions: [],

      ////////
      rows: ["", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      columns: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    };
  },

methods: {
    ...mapActions(["fetchingGamePlayerId", "getPlacedShipsGamePlayer"]),
    ///////////////////////////////////////////////////////////////////////////////////
    putShips() {
      return this.$store.dispatch("getPlacedShipsGamePlayer", {
        gamePlayerId: this.gamePlayerId,
        ships: this.shipsToSendBackEnd
      });
      console.log(this.shipsToSendBackEnd);
    },

    putSalvos() {
      return this.$store.dispatch("getPlacedShotsGamePlayer", {
        gamePlayerId: this.gamePlayerId,
        salvos: this.shootingstoPositions
      });
      console.log(this.salvosSack);
    },
    /////////////////////////////////////////////////////////////////////////////////
    dropShip(e) {
      const ship_id = e.dataTransfer.getData("ship_id");
      const ship = document.getElementById(ship_id);
      let target = e.target;
      let positionIdOfImg = target.id.match(/[a-z]+|[^a-z]+/gi); //getting all Id splited in letra y numero
      let getNumOfPositionId = Number(positionIdOfImg[1]); //numero dentro del array
      let getStringOfPositionId = positionIdOfImg[0]; //letra dentro el array

      // ////esto debe ser exportado a la data para despues renderizarlo a condicionales de posicion en
      let newShipLoc = [];
      this.targetEx = target;
      this.ship_idEx = ship_id;
      this.shipEx = ship;
      this.positionIdOfImgEx = positionIdOfImg,
      this.getNumOfPositionIdEx = getNumOfPositionId,
      this.getStringOfPositionIdEx = getStringOfPositionId,
        //////logs de todos los elementos
      console.log(ship_id);
      console.log(e.target);
      console.log(positionIdOfImg);
      console.log(getNumOfPositionId);
      console.log(getStringOfPositionId.charCodeAt(0));
      console.log(ship.dataset);

      this.conditionals(); ///importado como condicionales de orientation y demas
    },
    ///////////////////////////////////////////////////////////////////////////
    conditionals() {

      if (
        (this.targetEx.id.length != 1 &&
          this.getNumOfPositionIdEx + Number(this.shipEx.dataset.shipLength) <
            12 &&
          this.shipOrientations[this.shipEx.dataset.shipType]) ||
        (this.targetEx.id.length != 1 &&
          this.getStringOfPositionIdEx.charCodeAt(0) +
            Number(this.shipEx.dataset.shipLength) <
            76 &&
          !this.shipOrientations[this.shipEx.dataset.shipType])
      ) {
        this.shipEx.style.position = "absolute";
        this.shipEx.style.display = "block";
        this.targetEx.appendChild(this.shipEx); ///adhiere la nave al place donde se posiciona la misma
        this.orientationShips();
      } else {
        console.log("sorry you cant place it");
      }
    },
    ///////////////////////////////////////////////////////////////////////////////////////
    dragStart(e) {
      const target = e.target;
      console.log(e.target);

      e.dataTransfer.setData("ship_id", target.id);

      // setTimeout(() => {
      //   target.style.display = "none";
      // }, 1);
    },
    ///////////////////////////////////////////////////////////////////////////////
    removeShips() {
      console.log("remove");

      var ship = this.shipEx;
      let ShipColors = Array.from(
        document.getElementsByClassName(ship.dataset.shipType)
      );
      console.log(ShipColors);

      for (let i = 0; i < ShipColors.length; i++) {
        ShipColors[i].classList.remove(ship.dataset.shipType);
      }
    },
    ///////////////////////////////////////////////////////////////////////////////
    orientationShips(event) {
      let newShipLoc = [];
      const ship = this.shipEx;

      this.removeShips();

      console.log(event);
      console.log(this.ship_idEx);
      console.log(this.currentShipPosition);
      console.log(this.positionIdOfImgEx);
      console.log(this.getNumOfPositionIdEx);
      console.log(this.shipEx.dataset);

      if (this.shipOrientations[ship.dataset.shipType]) {
        if (this.getNumOfPositionIdEx + Number(ship.dataset.shipLength) < 12) {
          console.log("Horizontal");
          for (let i = 0; i < ship.dataset.shipLength; i++) {
            //horizontall
            newShipLoc.push(
              this.getStringOfPositionIdEx + (this.getNumOfPositionIdEx + i)
            );
            document
              .getElementById(
                this.getStringOfPositionIdEx + (this.getNumOfPositionIdEx + i)
              )
              .classList.add(ship.dataset.shipType);
          }
          this.shipsToSendBackEnd.forEach(shipToSend => {
            if (shipToSend.typeShip == ship.dataset.shipType) {
              shipToSend.shipPositions = newShipLoc;
            }
          });
        } else {
          console.log("sorry you cant");
        }
      } else {
        if (
          this.getStringOfPositionIdEx.charCodeAt(0) +
            Number(ship.dataset.shipLength) <
          76
        ) {
          console.log("Vertical");
          for (let i = 0; i < ship.dataset.shipLength; i++) {
            //vertical

            newShipLoc.push(this.getStringOfPositionIdEx.charCodeAt(0) + i);

            document
              .getElementById(
                String.fromCharCode(
                  this.getStringOfPositionIdEx.charCodeAt(0) + i
                ) + this.getNumOfPositionIdEx
              )
              .classList.add(ship.dataset.shipType);
          }
          this.shipsToSendBackEnd.forEach(shipToSend => {
            if (shipToSend.typeShip == ship.dataset.shipType) {
              shipToSend.shipPositions = newShipLoc;
            }
          });
        }
      }
    },
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    drawShip(event, ship) {
      this.getNumOfPositionIdEx = Number(
        event.target.offsetParent.id.split("")[1]
      );
      this.getStringOfPositionIdEx = event.target.offsetParent.id.split("")[0];

      console.log(event);
      console.log(document.getElementById(event.target.id));

      console.log(event.target.id);
      this.positionIdOfImgEx = event.target.offsetParent.id.split("");
      console.log(this.positionIdOfImgEx);

      this.shipEx = document.getElementById(event.target.id);
      console.log(this.shipEx);

      this.shipOrientations[ship] = !this.shipOrientations[ship];
      // console.log("orientation");

      this.orientationShips(ship);
    },

  computed: {
    ...mapGetters(["getGamePlayerId", "getPlayerInfo"])
  },
///////////////////////////////////////////////////////////////////////////////////////////////////
  created() {
    this.fetchingGamePlayerId(this.gamePlayerId);
    this.salvosToSend();
  },
/////////////////////////////////////////////////////////////////////////////////////////////////
  // Destroyer
  // Submarine
  // PatrolBoat
  // Carrier
  //BattleShip
                    ```

玩
火！！！
从“vuex”导入{MapGetter、mapActions、MapTranslations、mapState}；
//从“./组件/测试仪”导入测试仪；
导出默认值{
名称：“GamesGrid”，
道具：[“玩家id”，“id”]，
数据（）{
返回{
职位：[]，
对手照片：[]，
initialDropPosition:[]，///todas las variables del drop exteriorizadas
船舶idEx:[]，
shipEx:[]，
positionIdOfImgEx:[]，
getNumOfPositionIdEx:[]，
getStringOfPositionIdEx:[]，
性别：[]，
当前发货位置：[]，
targetEx:[]，
/////船舶目标
船舶定位：{
驱逐舰：没错，
巡逻艇：是的，
潜艇:对,，
战舰：没错，
承运人：对
},
///////
shipsToSendBackEnd：[
{船型：“驱逐舰”，船位：[]}，
{船型：“潜艇”，船位：[]}，
{船型：“巡逻艇”，船位：[]}，
{船型：“承运人”，船位：[]}，
{船型：“战舰”，船位：[]}
],
地理位置：[]，
////////
行：[、1、2、3、4、5、6、7、8、9、10]，
列：[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”、“J”]
};
},
方法：{
…映射操作（[“fetchingGamePlayerId”、“getPlacedShipsGamePlayer”]），
///////////////////////////////////////////////////////////////////////////////////
putShips（）{
返回此.$store.dispatch（“getPlacedShipsGamePlayer”{
gamePlayerId:this.gamePlayerId，
ships:this.shipsToSendBackEnd
});
console.log（this.shipstosendbend）；
},
putSalvos（）{
返回此.$store.dispatch（“getPlacedShotsGamePlayer”{
gamePlayerId:this.gamePlayerId，
萨尔沃斯：这是射击地形
});
console.log（this.salvosSack）；
},
/////////////////////////////////////////////////////////////////////////////////
投递船（e）{
const ship_id=e.dataTransfer.getData（“ship_id”）；
const ship=document.getElementById（船舶id）；
设target=e.target；
让positionIdOfImg=target.id.match（//[a-z]+|[^a-z]+/gi）；//将所有id以letra y numero分割
让getNumOfPositionId=Number（positionIdOfImg[1]）；//numero dentro del数组
让getStringOfPositionId=positionIdOfImg[0]；//letra dentro el数组
/////esto debe ser exportado a la data para despues renderizarlo a condicionales de POSISION en
让newShipLoc=[]；
this.targetEx=目标；
this.ship_idEx=ship_id；
this.shipEx=船舶；
this.positionIdOfImgEx=positionIdOfImg，
this.getNumOfPositionIdEx=getNumOfPositionId，
this.getStringOfPositionIdEx=getStringOfPositionId，
//////元素日志
控制台日志（船号）；
console.log（如target）；
控制台日志（positionIdOfImg）；
console.log（getnumfopositionid）；
log（getStringOfPositionId.charCodeAt（0））；
console.log（ship.dataset）；
this.conditionals（）；///importado-como-conditionals-de-orientation y-demas
},
///////////////////////////////////////////////////////////////////////////
条件句{
如果(
（this.targetEx.id.length！=1&&
this.getNumOfPositionIdEx+编号（this.shipEx.dataset.shipLength）<
12 &&
this.shipOrientations[this.shipEx.dataset.shipType]）||
（this.targetEx.id.length！=1&&
此.getStringOfPositionIdEx.charCodeAt（0）+
编号（this.shipEx.dataset.shipLength）<
76 &&
！this.shipOrientations[this.shipEx.dataset.shipType]）
) {
this.shipEx.style.position=“绝对”；
this.shipEx.style.display=“block”；
this.targetEx.appendChild（this.shipEx）；///adhiere la nave al place donde se posiciona la mism
这就是方向（）；
}否则{
console.log（“对不起，您不能放置它”）；
}
},
///////////////////////////////////////////////////////////////////////////////////////
dragStart（e）{
const target=e.target；
console.log（如target）；
e、 dataTransfer.setData（“ship_id”，target.id）；
//设置超时（（）=>{
//target.style.display=“无”；
// }, 1);
},
///////////////////////////////////////////////////////////////////////////////
免职{
控制台日志（“删除”）；
var ship=this.shipEx；
让ShipColors=Array.from(
document.getElementsByClassName（ship.dataset.shipType）
);
控制台日志（ShipColors）；
for（设i=0；i