Currently, I am working on a customizing tool for cursors using Vuejs and Vuex. My main challenge lies in the process of binding the color selected by the user to the fill property of an SVG cursor. Allow me to explain step by step how everything is supposed to function.
In my project, I have various inline SVG's which serve as replacements for the default HTML cursor. These SVG's are stored in the Vuex state.
https://i.sstatic.net/xnWqS.png
To clarify, these SVG's are set up this way so that when a user clicks a button on the first component, the default cursor is hidden and the chosen SVG is bound with v-html. Essentially, they are presented as HTML code within the components.
However, the problem arises when the selected cursor appears on the second component where the user should be able to modify the fill color.
I am struggling to figure out how I can access and manipulate the fill property of the SVG's.
I attempted to bind it with :fill = "dataName" but encountered difficulties.
https://i.sstatic.net/OlGmQ.png
Although I am new to Vuejs, I hope my query is clear enough to solicit some assistance.