In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and throwing errors. I'm unsure of what I might be overlooking.
Here's a snippet from the Vue template where I intend to display the inline SVG code:
<code v-text="appendDimension"></code>
This is how it looks inside the single Vue component:
export default {
name: "App",
data() {
return {
dimension: 50,
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16z"/></svg>'
}
},
computed: {
appendDimension() {
return this.icon.setAttribute("width", this.dimension);
}
}
};
I have set up a demonstration project on CodeSandbox for you to reproduce the issue. Your assistance would be greatly appreciated.