How to change CSS cursor dynamically vuejs

Question

This is probably too broad of a question, but I am trying to recreate a cursomizer 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 active class to the chosen item. If anyone has any advice on how to approach this problem, jump in.

<template>
<div>
    <h1>Choose cursor</h1>
    <section class="cursors-wrapper">
        <ul class="cursor-list">
            <li class="cursor-list-item" @click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" >
               <a href="#" class="cursor-list-item-inner">
                   <!-- SVGG-->
                    <div v-html="cursor.cursorImage"></div>
                </a> 
            </li>
        </ul>
    </section>
    <div @click="choosenOne"></div>
</div>

<script>
export default {
data () {
return {
    cursors: [
        {
            cursorId: '1',
            cursorImage: `<svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"></ellipse>
                    </svg>`          
        },
        {
           cursorId: '2',
            cursorImage: `<svg class="cursor-overflow cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">/*  */
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
                            stroke-width="3" stroke="#000"></ellipse>
                    </svg>`
        },
        {
            cursorId: '3',
            cursorImage: ` <svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">
                        <path class="cursor-svg__main" d="M 0 0 L 12 10 L 0 16" opacity="1" fill="#000"></path>
                    </svg>`
        }
    ],
    active_el: 0
}
},
methods:{
activateCursor:function(el){
    this.active_el = el;
    console.log(this.cursorId);
}
}
}

Solution

The best solution I can think of is to use style bindings. This way, you can define the cursor in your data object and change it dynamically afterwards ( v-bind:style="{cursor: selectedCursor}").

As for setting the cursor, you can use the method like shown by the top answer of this question.

I've created a fiddle to illustrate what I mean https://jsfiddle.net/rnab4tep/1/

All you have to do now is set selectedCursor to the cursor of your liking.

Comments

[Luka]

In the end, I have chosen to go with creating a few different divs with SVG inside of them and then position it from javascript because it made more sense for my project, but your version is much cleaner! Thanks