title: I want click and drag cursor to draw in grid using vue
body: <p>i want to create something like <a href="https://qiao.github.io/PathFinding.js/visual/" rel="nofollow noreferrer">pathfinding</a> using vue. So when i click and drag in the grid i want to get all the data-x and data-y value in array and change the color of those cells,
  and when i click on obstacle button then it should draw accordingly.
  i can use python for backend if that helps somehow .</p>
  <p>here's my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
      /&gt;
  
      &lt;style&gt;
        .g-x {
          width: max-content;
          display: flex;
        }
        .g-y {
          border: 1px solid #d8d6de;
          margin: 1px;
          box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
        }
        #grid {
          box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
        }
        span.inner-grid {
          width: 20px;
          display: block;
          height: 20px;
          transition: all 0.2s ease-in-out;
          background-color: rgb(233, 166, 166);
          border-radius: 5px;
          margin: 3px;
        }
        span.inner-grid:hover {
          background-color: rgb(189, 224, 65);
        }
        .start {
          background-color: green;
        }
        .end {
          background-color: red;
        }
  
        .wall {
          background-color: rgb(0, 0, 0);
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=""&gt;
        &lt;div id="buttons" class="row"&gt;
          &lt;div class="col-4 my-5 text-center btn-parent"&gt;
            &lt;button
              class="btn btn-primary btn-sm setVal"
              v-on:click="setMode('start')"
              type="button"
            &gt;
              Select Start
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-4 my-5 text-center btn-parent"&gt;
            &lt;button
              class="btn btn-primary btn-sm setVal"
              v-on:click="setMode('end')"
              type="button"
            &gt;
              Select End
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-4 my-5 text-center btn-parent"&gt;
            &lt;button
              class="btn btn-primary btn-sm setVal"
              v-on:click="setMode('wall')"
              type="button"
            &gt;
              Select Obstacle
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div id="grid" class="col-12"&gt;
            &lt;span class="g-x" v-for="(x, index) in grid_x"&gt;
              &lt;span class="g-y" v-for="(y, index) in grid_y"&gt;
                &lt;span
                  v-on:click="setVal()"
                  :data-x="x"
                  :data-y="y"
                  class="inner-grid"
                &gt;
                &lt;/span&gt;
              &lt;/span&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        var grid_x = [];
        var grid_y = [];
  
        var mode = "start";
  
        for (let i = 0; i &lt; 50; i++) {
          grid_x.push(i);
          grid_y.push(i);
        }
  
        var example2 = new Vue({
          el: "#grid",
          data: {
            parentMessage: "Parent",
            grid_x: grid_x,
            grid_y: grid_y,
          },
          methods: {
            setVal: function () {
              var element = event.target;
              var x = element.getAttribute("data-x");
              var y = element.getAttribute("data-y");
            },
          },
        });
        var button = new Vue({
          el: "#buttons",
          methods: {
            setMode: function (type) {
              mode = type;
            },
          },
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>