Почему фрейм выводится как строка?

Question

[Andrej Sharapov]

Подскажите, почему фрейм выводится как строка, а не как блок?
JSON файл:

spoiler

[
    {
        "iframe": "<iframe src=\"https://www.youtube.com/embed/123\" allowfullscreen></iframe>",
        "title": "Испытание",
        "body": "эталонного давления взрыва"
    },
    {
        "iframe": "<iframe src=\"https://www.youtube.com/embed/123\" allowfullscreen></iframe>",
        "title": "Испытание",
        "body": "на искрообразующем механизме"
    },

Шаблон:

Vue.component('video', {
    props: ['loading', 'video'],
    template: `
    <div class="grid-card grid-3">
        <div v-if="loading">
            loading...
        </div>
        <template v-else v-for="{iframe, title, body} in video">
            <div class="card">
                <div class="card-content">
                    {{ iframe }}
                </div>
                <div class="card-name">
                    <h3 class="card-title">{{ title }}</h3>
                    <p>{{ body }}</p>
                </div>
            </div>
        </template>
    </div>
    `,
});

const videos = 'js/videos.json'  ;

new Vue({
    el: '#app',
    data() {
        return {
            loading: true,
            video: [],
        }
    },
    created() {
        axios.get(videos).then((response) => {
          this.video = response.data
          this.loading = false
        }),
    },
    props: {
        iframe: {
            type: Object,
        },
    },
});

Сейчас фрейм выводится просто html кодом, а не как видео

Пробовал заменить {{ iframe }} на

<iframe :src="{ iframe }" allowfullscreen></iframe>

, не срабатывает.

Answer 1

[Дима Паутов]

Потому что html выводится во vue иначе!!

<div 
  class="card-content" 
  v-html="iframe"
/>

Comments

[Andrej Sharapov]

точно! Спасибо... забыл.