Подскажите, почему фрейм выводится как строка, а не как блок?
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>
, не срабатывает.
