How can I change the colour of a certain div in Vue.js

user_13831774 0
Viewed 70

I currently have a grid of blank squares made from divs. When I click on a grid space, the entire grid changes colour. I'm trying to just get the square(div) I click on to change colour. This is what my code looks like. Any help would be appreciated.

<div id="app">
  <section class="grid-container">
    <div :style="isClicked ? {'background': 'green'} : null" @click="toggleIsClicked" v-for="square in grid" :square="square" v-bind:class="space">{{square}}</div>
  </section>
</div>

<script>
    var app = new Vue({
        el: '#app',
        
        props: ['square'],
        data:{
            isClicked: false,
            space: "space",

            grid:
            ["","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","",""]
        },
        methods:{
            toggleIsClicked : function() {
                if(!this.isClicked){
                    this.isClicked = true;
                    console.log(this.key);
                }else{
                    this.isClicked = false;
                }
            },

        }
        
    });
    </script>
vue.js grid colors html javascript
1 Answers

https://codesandbox.io/s/immutable-worker-pkqkd?file=/src/App.vue:332-762

<div id="app">
   <section class="grid-container">
      <div
        :key="square.id"
        v-for="(square,index) in grid"
        :style="square.clicked ? style : null"
        @click="()=>onClick(index)"
      >{{square.text}}</div>
   </section>
</div>

<script>
  var app = new Vue({
   el: '#app',
        
   data() {
    return {
      space: "space",
      style: { background: "green" },
      grid: []
    };
   },
   methods: {
    onClick: function(index) {
      this.grid[index].clicked = !this.grid[index].clicked;
    }
   },
   mounted() {
    let squares = [];
    for (let i = 0; i < 100; i++) {
      let id = Math.random() * 10000000;
      squares.push({ text: "#", clicked: false, id: id });
    }
    this.grid = squares;
   }
 });
</script>
user_123646780
Related