Блог

Главная - Вопросы по программированию - v-html, получающий prop, не отображает (Vue, SVG)

v-html, получающий prop, не отображает (Vue, SVG)

#vue.js #svg #data-binding

#vue.js #svg #привязка данных

Вопрос:

Я передаю строку, содержащую последовательность элементов, в качестве prop, которую я пытаюсь отобразить, используя: 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>

Однако при проверке результата в инструментах разработчика html не отображается, а отображается только в атрибуте v-html :

скриншот devtools

Чего мне не хватает?

Ответ №1:

директивы привязаны по умолчанию, им не нужен знак привязки : или v-bind: :

  <g v-html="sequence" />