One of my Vue.js components is responsible for dynamically building the content of an svg element. Let's simplify things and say that the content consists of a
<circle cx="50" cy="50" r="60" />This component achieves this by manipulating a data variable called svg:
data() {
return {
svg: '<circle cx="50" cy="50" r="60" />',
foobar: 'foobar',
};
},
In the parent component, I have some specific customizations for the svg element (such as width, height, viewBox). How can I render this out in the template in its "raw" form?
<template>
<svg v-html="svg"></svg>
</template>
The above code will add the svg element to the output, which is not desired.