title: How to change CSS cursor dynamically vuejs
body: <p>This is probably too broad of a question, but I am trying to recreate a <a href="https://cursomizer.com/" rel="nofollow noreferrer">cursomizer</a> with Vuejs as a framework. I got stuck in a position where I have to change the cursors dynamically. These cursors are supposed to be SVG files which are able to be accessed from the next component where the user would be able to modify the size and fill. My concern is can store different cursors in different buttons and update when clicked. The code that I provided contains different list items which are dynamically generated and when clicked, it adds <strong>active</strong> class to the chosen item. If anyone has any advice on how to approach this problem, jump in.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;h1&gt;Choose cursor&lt;/h1&gt;
      &lt;section class="cursors-wrapper"&gt;
          &lt;ul class="cursor-list"&gt;
              &lt;li class="cursor-list-item" @click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" &gt;
                 &lt;a href="#" class="cursor-list-item-inner"&gt;
                     &lt;!-- SVGG--&gt;
                      &lt;div v-html="cursor.cursorImage"&gt;&lt;/div&gt;
                  &lt;/a&gt; 
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
      &lt;div @click="choosenOne"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
  export default {
  data () {
  return {
      cursors: [
          {
              cursorId: '1',
              cursorImage: `&lt;svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                          width="16"&gt;
                          &lt;ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"&gt;&lt;/ellipse&gt;
                      &lt;/svg&gt;`          
          },
          {
             cursorId: '2',
              cursorImage: `&lt;svg class="cursor-overflow cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                          width="16"&gt;/*  */
                          &lt;ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
                              stroke-width="3" stroke="#000"&gt;&lt;/ellipse&gt;
                      &lt;/svg&gt;`
          },
          {
              cursorId: '3',
              cursorImage: ` &lt;svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                          width="16"&gt;
                          &lt;path class="cursor-svg__main" d="M 0 0 L 12 10 L 0 16" opacity="1" fill="#000"&gt;&lt;/path&gt;
                      &lt;/svg&gt;`
          }
      ],
      active_el: 0
  }
  },
  methods:{
  activateCursor:function(el){
      this.active_el = el;
      console.log(this.cursorId);
  }
  }
  }
  </code></pre>
  
  <p></p>