Как передать в компонент Vue элементы HTML

Question

Есть метод playSound:

playSound: function(tile) {
            if (this.mode !== 'light-only') {
                var audio = $('<audio id="player" autoplay></audio>');
                audio.append('<source src="./assets/sounds/' + tile + '.ogg" type="audio/ogg" />');
                audio.append('<source src="./assets/sounds/' + tile + '.mp3" type="audio/mp3" />');
                audio.append(' Ваш браузер не поддерживает ни audio ни javascript ');
                $('[data-action=sound]').html(audio);
            }
        },

Так же есть компонент Audio:

components: {
      Audio
  }

Нужно из метода передавать в компонент следующие данные:

<source src="../assets/sounds/2.ogg" type="audio/ogg">
<source src="../assets/sounds/2.ogg" type="audio/mp3">

Передавать параметры в методе playSound. Вроде такого

<Audio v-bind:[params]/>

Но именно в методе. Как можно такое реализовать ?

Answer 1

Vue.js имеет в своём арсенале директиву v-html, которая годится для динамической вставки HTML в компонент или тег.

Применяется примерно вот так:

<template>
  <div v-html="myDynamicHtml"/>
</template>

<script>
export default {
  computed: {
    myDynamicHtml () { return '<h1>Мой HTML</h1>' }
  }
}
</script>

Подробнее о ``v-html``` можно посмотреть в документации по Vue.js

БЛОГ НА HUSL

Как передать в компонент Vue элементы HTML

Ответы (1 шт):