使用 Vue 更改數據時添加背景顏色

Question

我有 3 個容器，其中前兩個具有拖放功能 function，因此當我將元素放在那里時，它會更改容器顏色。 這可以正常工作，但我想做的是，當第一個和第二個容器有顏色時，第三個容器會自動更新為新顏色。 我正在使用 Vuejs。

例如：容器 1 為紅色，容器 2 為黃色。 第三個容器會自動更新為橙色。 每次我更改容器的顏色時都會發生這種情況。

這是我的代碼：

HTML

 <!-- the containers where I drop the elements --> 
          <div class="box-flex">
              <div class="box" @dragover.prevent @drop="drop" id="box-1"></div>
              <div class="box" @dragover.prevent @drop="drop2" id="box-2"></div>
              <div class="box" id="box-3"></div>
          </div>
      <!-- the elements I want to drag -->
      <div v-for="(flower, i) in flowers" :key="i">
          <div v-if="flower_type == flower.type">
            <p>{{ flower.type }}</p>

            <p v-for="(color, j) in flower.colors" :key="j">
              <span
                :id="flower.type + '-' + color"
                :draggable="true"
                @dragstart="dragStart"
                @dragover.stop
              >{{ color }}</span>
            </p>
          </div>
        </div>

腳本

 data() {
        return {
          //flowers
          flowers: [
            {
              type: "Cosmos",
              colors: ["red", "yellow", "orange", "black", "pink", "white"]
            },
          ],
        };
      },

      methods: {
        dragStart(e) {
          let target = e.target;
          e.dataTransfer.setData("color_id", target.id);
          e.dataTransfer.setData("box_el", target);
          let box1 = document.getElementById("box-1");
        },
        //first container drop
        drop(e) {
          let colorId = e.dataTransfer.getData("color_id"); //id of the color (red, yellow...)
          let colorEl = e.dataTransfer.getData("box_el"); //element of the color
          let box1 = document.getElementById("box-1");

          box1.classList.add(colorId);

          if (box1.classList.length > 2) { //I only want one color-class in the container
            box1.classList.remove(box1.classList[1]);
          }
        },
        //second container drop
        drop2(e) {
          let colorId = e.dataTransfer.getData("color_id"); //id of the color (red, yellow...)
          let colorEl = e.dataTransfer.getData("box_el"); //element of the color
          let box2 = document.getElementById("box-2");

          box2.classList.add(colorId);
          if (box2.classList.length > 2) {
            box2.classList.remove(box2.classList[1]);
          }
        }
      },
      computed: {
        evFlower() {
          let box1 = document.getElementById("box-1");
          let box2 = document.getElementById("box-2");
          let box3 = document.getElementById("box-3");
          if (
            box1.classList.contains("Cosmos-red") &&
            box2.classList.contains("Cosmos-yellow")
          ) {
              box3.classList.add("Cosmos-orange");
          }
        }
      }

CSS

.box-flex {
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box,
.box-1,
.box-2 {
  width: 20%;
  height: 20%;
  border: 2px solid black;
}
.Cosmos-red {
  background: red;
}

.Cosmos-yellow {
  background: yellow;
}

.Cosmos-orange {
  background: orange;
}

我已經嘗試過使用觀察者，但還沒有找到一種方法來“觀察”DOM 的變化。

提前致謝！！

Answer 1

我認為您將事情復雜化了，除非嚴格需要，否則最好避免 DOM 操作。

添加內聯 styles 或使用反應數據在 vue 模板上切換類是更好的解決方案，而不是像使用舊的 Jquery 那樣直接在 DOM 上添加和刪除類。

這是反應式的，易於控制且成本低廉：

 <div :style="{ background: box1}"></div>

我已經按照以下規則重寫了您的代碼：

<template>
  <div>
  <div class="box-flex">
      <div class="box" @dragover.prevent @drop="drop" id="box-1" :style="{ background: box1}"></div>
      <div class="box" @dragover.prevent @drop="drop2" id="box-2" :style="{ background: box2}"></div>
      <div class="box" :style="{ background: box3}"></div>
  </div>
<!-- the elements I want to drag -->
<div v-for="(flower, i) in flowers" :key="i">
  <div>
    <p>{{ flower.type }}</p>

    <p v-for="(color, j) in flower.colors" :key="j">
      <span
        :id="color"
        :draggable="true"
        @dragstart="dragStart"
        @dragover.stop
      >{{ color }}</span>
    </p>
  </div>
</div>
</div>
</template>

<script>

export default {

  name: 'Intro',

  components: {
  },

  data() {
    return {
      //flowers
      flowers: [
        {
          type: "Cosmos",
          colors: ["red", "yellow", "orange", "black", "pink", "white"]
        },
      ],
      box1: 'white',
      box2: 'white',
      box3: 'white',
    };
  },

  methods: {
    dragStart(e) {
      let target = e.target;
      e.dataTransfer.setData("color_id", target.id);
      e.dataTransfer.setData("box_el", target);
    },
    //first container drop
    drop(e) {
      this.box1 = e.dataTransfer.getData("color_id");
      if ( this.box1 == 'red' && this.box2 == 'yellow') {
        this.box3 = 'orange'
      }
      else {
        this.box3 = 'white'
      }
    },
    //second container drop
    drop2(e) {
      this.box2 = e.dataTransfer.getData("color_id");
      if ( this.box1 == 'red' && this.box2 == 'yellow') {
        this.box3 = 'orange'
      }
      else {
        this.box3 = 'white'
      }
    }
  },
};
</script>

<style>
.box-flex {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box,
.box-1,
.box-2 {
  width: 20px;
  height: 20px;
  border: 2px solid black;
}
.Cosmos-red {
  background: red;
}

.Cosmos-yellow {
  background: yellow;
}

.Cosmos-orange {
  background: orange;
}
</style>