Question

我在Vue.js代码中有

  <div class="footer-items">
  <span v-for="link in links" :key="link.name">
  <a :href="link.Link" class="tertiary--text footer-links">{{ link.name }}</a>
  </span>
</div>

这为我提供了一些链接的页脚。我想让其中一些链接打开外部窗口或标签。

它从中加载的数组是：

   data: () => ({
   links: [
  { name: "Home", Link: "/dashboard" }, // needs to open same page
  { name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed" } // needs new window
  ]

这有效，但是它在同一窗口中打开，我尝试过：

        { name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/,_blank" },  // error page

        { name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/','_blank" }, // open same page

        { name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/"','"_blank" },  // won't compile

        Link: "https://www.ncbi.nlm.nih.gov/pubmed/ target=_blank"  // opens same window

是否可以以编程方式将其发送到href。我无法更改href，因为并非所有页面都需要在新窗口中打开。

我将代码更改为：

          <a :href="link.Link" target="link.place" class="tertiary--text 
           footer-links">{{ link.name }}</a>

并在数组中添加一个位置：

          { name: "Home", Link: "/dashboard", place: "_self" },
           {name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/",
           place: "_blank"
         },

它们都在新窗口中打开。感谢所有帮助。

Answer 1

尝试一下（jsfiddle）：

// Script
links: [
    { name: "Home", href: "/dashboard", target: "_self" },
    { name: "Google", href: "https://www.google.com/", target: "_blank" },
]

// Template
<a
    v-for="link in links"
    :key="link.name"
    :href="link.href"
    :target="link.target"
    rel="noopener noreferrer">
    {{ link.name }}
</a>

Vue.js在新窗口中打开链接

1 个答案: