Search code examples
vue.jssvgdata-binding

v-html receiving a prop does not render (Vue, SVG)


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 :

devtools screenshot

What am I missing ?


Solution

  • directives are bound by default they don't need binding sign : or v-bind::

     <g v-html="sequence" />