从 HTML 到 VUE 的脚本 - 单击时更改 bg 颜色

Question

目前我可以更改 div 的颜色，从现在开始我将在普通 html 文件中将其称为 'Cell'，如下所示：

<script type=text/javascript>

    var type = -1;

    function colorCell() {
        if(type==0){
            event.target.style.backgroundColor = ' #fdcb6e ';
        }else if(type==1){
            event.target.style.backgroundColor = ' #fab1a0 ';
        }else if(type==2){
            event.target.style.backgroundColor = ' #fd79a8 ';
        }else if(type==-1){
            event.target.style.backgroundColor = ' azure ';
        }
    }

    function delay(){
        type=0;
    }
    function panne(){
        type=1;
    }
    function reserved(){
        type=2;
    }
    function clean(){
        type=-1;
    }
</script>

单元格可以根据类型参数更改为不同的颜色。单击其他按钮（不是单元格）时类型会发生变化。

关于如何在 VUE 中完成此操作的任何方向？我无法让它工作。

编辑：

要向提出的问题添加信息，我需要每个单元格仅在单击时才着色。单元格以如下迭代方式形成：

    <div class="body">
        <div v-for="column in 25" :key="column.id" class="column">
          <div v-for="row in 10" :key="row.id" class="frame">
                <span v-if="column == 1">ROW-NAME</span>
                <div v-else class="selector"><b-button @click="colorCell($event)"  /></div>
          </div>
        </div>
    </div>

Answer 1

您可以使用如下所示的组件实现此目的：

<template>
  <div>
    <div :style="{ backgroundColor }">Cell</div>
    <button @click="delay">delay</button>
    <button @click="panne">panne</button>
    <button @click="reserved">reserved</button>
    <button @click="clean">clean</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: -1,
    }
  },
  computed: {
    backgroundColor() {
      if (this.type == 0) {
        return '#fdcb6e';
      } else if (this.type == 1) {
        return '#fab1a0';
      } else if (this.type == 2) {
        return '#fd79a8';
      } else if (this.type == -1) {
        return 'azure';
      }
      return '';
    }
  },
  methods: {
    delay() {
      this.type = 0;
    },
    panne() {
      this.type = 1;
    },
    reserved() {
      this.type = 2;
    },
    clean() {
      this.type = -1;
    }
  }
}
</script>

更新：

为了单独给单元格着色，您可以这样做（注意：您尝试使用 column.id 和 row.id 但这些属性不存在 - column 和row 是整数):

    <div class="body">
        <div v-for="column in 25" :key="column" class="column">
          <div v-for="row in 10" :key="row" class="frame" :ref="`${column}-${row}`">
                <span v-if="column == 1">ROW-NAME</span>
                <div v-else class="selector"><b-button @click="colorCell(column, row)"  /></div>
          </div>
        </div>
    </div>

colorCell(col, row) {
  const el = this.$refs[`${col}-${row}`][0];
  // Update the colour of the individual cell here e.g. el.style.backgroundcolor = '#fdcb6e'
}

从 HTML 到 VUE 的脚本 - 单击时更改 bg 颜色

Script from HTML to VUE - change bg color on click

html

javascript

syntax

vue.js