Блог

В настоящее время я могу изменить цвет div, который отныне я буду называть «Ячейкой», в ванильном HTML-файле следующим образом:

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

Ячейка может меняться на разные цвета в зависимости от параметра type. Тип изменяется при нажатии других кнопок (не ячеек).

Любая ориентация на то, как это сделать в 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>
 

Вы могли бы достичь этого с помощью компонента, который выглядит примерно так:

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