Is it too ambitious to try and recreate a custom cursor tool like cursomizer using Vuejs? I've hit a roadblock where I need to dynamically change the cursors displayed. These cursors are SVG files that should be accessible from the next component, allowing users to adjust size and fill. My main concern is whether I can store different cursor options in different buttons and update them when clicked. The code snippet provided includes a list of items generated dynamically, with clicking on an item adding an active class to it. Any tips or advice on how to tackle this challenge would be greatly appreciated.
<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);
}
}
}