Javascript Iframe HTML，帮助根据悬停动态更改URL

我无法根据悬停的内容动态更改iframe。 我在vue中生成了以下代码：

<template>
<div>
     <div class="row">
       <h2> Ad performance </h2>
        </div>
         <div class="row">
            <div class="col-sm-6">
                <table class="table table-hover">
                    <thead>
                        <tr>
                        <th scope="col">Client</th>
                        <th scope="col">Ad</th>
                        <th scope="col">Impressions</th>
                        </tr>
                    </thead>
                <tbody>
                    <tr v-for="(ad, name) in adPerformance.slice(0,15)" :key="ad.adID">
                    <td>{{ad.client}}</td>
                    <td @mouseover="mouseEnter">{{ad.ad}}</td>
                    <td>{{ad.impressions}}</td>
                    </tr>
                </tbody>
                </table>
            </div>
            <div class="col-sm-6">
            <h4> Desktop preview </h4>
                <iframe src= "!!!Change this dynamically!!!"
                v-show="toShowOnHover" @mouseleave="mouseLeave"
                width="800" height="700">
                </iframe>
              </div>
         </div>
</div>
</template>
<script>
import axios from 'axios';
export default {
 data() {
  return {
  toShowOnHover: false,
  };
 },
 props: ['adPerformance'],
 components: {
 },
 methods: {
  mouseEnter: function(){
   this.toShowOnHover = !this.toShowOnHover;
  },
  mouseLeave: function(){
   this.toShowOnHover = false;
  }
 },
  created() {
  },
};
</script>

广告表现
客户
公元
印象
{{ad.client}}
{{ad.ad}}
{{ad.impressions}}
桌面预览
从“axios”导入axios；
导出默认值{
数据（）{
返回{
Toshowonhaver:错，
};
},
道具：['adPerformance']，
组成部分：{
},
方法：{
mouseEnter:function（）{
this.toshowonhave=！this.toshowonhave；
},
mouseLeave:function（）{
this.toshowonhave=false；
}
},
创建（）{
},
};

在我的本地主机服务器上，我有大量的广告预览URL，我希望根据您悬停的广告动态更改iframe中的src。 我的本地主机上的数据类型如下所示：

有人能帮我编写一个代码，把这些预览放到iframe中吗？

---

感谢您的帮助

我认为让别人把你变成你的一段代码并不是从问题中学习的好方法，所以我只会向你解释你能做什么，如果你有任何问题就开枪

您可以通过

@mouseover=“（）=>mouseEnter（ad.previewURL）”

您可以将局部变量创建为

previewURL

，并且在

mouseEnter

函数中，您可以使用接收到的参数分配

previewURL

所以

---

这个

previewURL

变量是被动的，所以如果你改变它，iframe src也会改变。

我认为让别人把你的代码变成你的代码不是从问题中学习的好方法，所以我只会向你解释你能做什么，如果你有任何问题就开枪

您可以通过

@mouseover=“（）=>mouseEnter（ad.previewURL）”

您可以将局部变量创建为

previewURL

，并且在

mouseEnter

函数中，您可以使用接收到的参数分配

previewURL

所以

---

此

previewURL

变量是被动的，因此如果更改它，iframe src也将更改。

首先，将iframe的src属性绑定到一个变量。然后更改mouseover处理程序，以便它可以获取previewURL并将您选择的变量设置为此url

在鼠标叶上，将变量设置为null

广告表现
客户
公元
印象
{{ad.client}}
{{ad.ad}}
{{ad.impressions}}
桌面预览
从“axios”导入axios；
导出默认值{
数据（）{
返回{
Toshowonhaver:错，
iframeURL:null
};
},
道具：[“adPerformance”]，
组件：{}，
方法：{
鼠标指针：函数（url）{
this.toshowonhave=true；
this.iframeURL=url；
},
mouseLeave:function（）{
this.toshowonhave=false；
this.iframeURL=null；
}
},
已创建（）{}
};

首先，将iframe的src属性绑定到一个变量。然后更改mouseover处理程序，以便它可以获取previewURL并将您选择的变量设置为此url

在鼠标叶上，将变量设置为null

广告表现
客户
公元
印象
{{ad.client}}
{{ad.ad}}
{{ad.impressions}}
桌面预览
从“axios”导入axios；
导出默认值{
数据（）{
返回{
Toshowonhaver:错，
iframeURL:null
};
},
道具：[“adPerformance”]，
组件：{}，
方法：{
鼠标指针：函数（url）{
this.toshowonhave=true；
this.iframeURL=url；
},
mouseLeave:function（）{
this.toshowonhave=false；
this.iframeURL=null；
}
},
已创建（）{}
};

这就是为什么我们，开发人员，以“从Stackoverflow复制和粘贴”xD而闻名。无论如何，我认为您在

：src=“iframeSrc”

中有一个小小的拼写错误。我想您的意思是

：src=“iframeURL”

@josefernandez谢谢。实际上，我在一个在线编辑器中测试了代码，最后忘了将所有的

iframeSrc

更改为

iframeURL

。这就是为什么我们开发人员以“从Stackoverflow复制和粘贴”闻名的原因。无论如何，我认为您在

：src=“iframeSrc”

中有一个小小的拼写错误，我认为您的意思是

：src=“iframeURL”

@JoseFernández谢谢。实际上，我在一个在线编辑器中测试了代码，最后忘记将所有

iframeSrc

更改为

iframeURL

。