Привязка VueJS переменной данных к iFrame src

Question

Я использую YouTube iFrame для встраивания проигрывателя YouTube в мое приложение Nuxt JS. videoId передается как свойство компоненту. Затем URL создается и возвращается как свойство данных к атрибуту src iFrame.

YoutubePlayer. vue

props: {
  videoId: {
    type: String,
    required: true
  }
},
data() {
  return {
    videoUrl:
      "https://www.youtube.com/embed/" +
      this.videoId+
      "?autoplay=1&origin=http://example.com"
  };
}

<template>
  <div class="iframeContainer">
    <iframe
      id="ytplayer"
      width="640"
      height="360"
      :src="videoUrl"
    ></iframe>
  </div>
</template>

Но это не работает. Что я делаю неправильно? ОБНОВЛЕНИЕ: нет ошибок в консоли и ничего на экране.

Answer 1

Можете ли вы попробовать это проверить?

props: {
  videoId: {
    type: String,
    required: true
  }
},

data() {
  return {
    videoUrl: '',

  };
},

watch: {
  videoId: function(newVal) { 
     this.videoUrl = "https://www.youtube.com/embed/" +
         newVal +
         "?autoplay=1&origin=http://example.com"
  }
}