[英]Vue.js app opening url links from a drop down in a new page
my code is我的代码是
<div class="md-list-item-content">
<drop-down direction="down">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple dropdown-toggle"
data-toggle="dropdown">
<i class="material-icons">view_day</i>
<p>Links</p>
</md-button>
<ul class="dropdown-menu dropdown-with-icons">
<li
v-for="li in linksExternal"
:key="li.name">
<a :href="li.href" >
<i class="material-icons">{{ li.icon }}</i>
</a>
</li>
</ul>
</drop-down>
</div>
and my script code is我的脚本代码是
linksExternal: [
{ name: "NCI Dictionary", href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'" , icon: "dns" }
]
I have tried to add the target='_blank' in various locations such as in the HTML a tag location but it still always open in the same tab or I may not have the syntax correct.我试图在不同的位置添加 target='_blank' ,例如在 HTML 标签位置,但它仍然总是在同一个选项卡中打开,或者我的语法可能不正确。 Can someone point me in the right direction?有人可以指出我正确的方向吗? It this a Vue specific item or should I be doing it a different way with a function that calls a window.open?这是一个 Vue 特定的项目,还是我应该用一个调用 window.open 的函数以不同的方式来做? I am trying to stay with the Vue best practices method if I can.如果可以,我会尽量坚持使用 Vue 最佳实践方法。 This should be a simple solution to look up but I have not found the solution.这应该是一个简单的查找解决方案,但我还没有找到解决方案。
尝试在里面使用target="_blank"
:
<a :href="li.href" target="_blank"> <i class="material-icons">{{ li.icon }}</i> </a>
我对标记的其余部分不太确定,但我建议您从 linksExternal 对象中删除目标部分,并将其放入<a>
元素中,如下所示
<a :href="li.href" target="_blank">Cool link that opens in another page</a>
Your code needs to change a bit:您的代码需要稍作更改:
href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'"
notice the target='_blank'
, target
is an attribute of the a
element and not part of the URL注意target='_blank'
, target
是a
元素的属性,而不是 URL 的一部分
so the data need to change to something like this:所以数据需要变成这样:
linksExternal: [
{ name: "NCI Dictionary", href: "https://www.cancer.gov/publications/dictionaries/cancer-terms", target="_blank", icon: "dns" }
]
and the template to this:和模板:
...
<li v-for="li in linksExternal" :key="li.name">
<a :href="li.href" :target="li.target">
<i class="material-icons">{{ li.icon }}</i>
</a>
</li>
...
or simply if all the links will need to open in a new tab:或者只是如果所有链接都需要在新选项卡中打开:
...
<li v-for="li in linksExternal" :key="li.name">
<a :href="li.href" target="_blank">
<i class="material-icons">{{ li.icon }}</i>
</a>
</li>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.