I'm passing a string containing a sequence of elements as a prop, which I try to render using :v-html="prop":
<template>
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 26 26"
:class="sizeClass"
:height="size"
:width="size"
>
<g :v-html="sequence" />
</svg>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "Avatar",
props: {
sizeClass: String,
size: String,
sequence: String,
},
});
</script>
However inspecting the result on dev tools, the html is not rendered, but appears only in the v-html attribute :
What am I missing ?
directives are bound by default they don't need binding sign :
or v-bind:
:
<g v-html="sequence" />