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

Question

Currently I'm able to change color of a div, that from now on I will refer to as 'Cell', in a vanilla html file as follows:

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

Cell can change to different colors according to the type parameter. Type changes when other buttons (not cells) are clicked.

Any orientation of how to get this done in VUE? I can't get it working.

EDIT:

To add information to proposed problem, I need each cell to be colored only when clicked. Cells are formed in a iterative way as follows:

    <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

You could achieve this with a component that looks something like this:

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

UPDATE:

In order to colour the cells individually you could do it like this (note: you were trying to use column.id and row.id but these properties do not exist - column and row are integers):

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