Привязка источника к iframe с помощью Vue JS показывает пустой iframe?

Question

В настоящее время у меня есть приложение Vue JS, которое мне нужно для привязки источника iframe к iframe. Я использовал предложенный метод v-bind: src = "", но используя Inspect Element, я вижу, что тег body iframe пуст. Можно ли это сделать, или мне лучше отказаться от поисков сокровищ?

<div id="app">
    <h1>{{message}}</h1>
    <div class="responsive-iframe">
      <iframe v-bind:src="maps.treasureMapFrame"></iframe>
    </div>
  </div>
</div>

Тогда мой JS будет таким, как показано ниже;

var app = new Vue({
  el: '#app',
    data() {
        return {
            message: "Find Treasure",
            maps: [
                {
                  treasureMapFrame:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1230838.6815658903!2d-3.2675559393922833!3d52.948750511868894!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4870be1abfbc770f%3A0x474d30c2c81f0893!2sTreasure%20Island%20Play%20Ltd!5e0!3m2!1sen!2sfr!4v1571778541141!5m2!1sen!2sfr"
                }   
            ]
        };
  }
})

Answer 1

вам нужно выбрать первый элемент в вашем массиве:

<iframe v-bind:src="maps[0].treasureMapFrame"></iframe>