javascript - Vue.js open link in new window - Stack Overflow

admin管理员组

文章数量:1401776

I have in Vue.js code

  <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>

The this gives me a footer with some links. I would like to have some of these links open an external window or tab.

The array that it loads from is:

   data: () => ({
   links: [
  { name: "Home", Link: "/dashboard" }, // needs to open same page
  { name: "PubMed", Link: "" } // needs new window
  ]

This works but it open in the same window, I've tried:

        { name: "PubMed", Link: "/,_blank" },  // error page

        { name: "PubMed", Link: "/','_blank" }, // open same page

        { name: "PubMed", Link: "/"','"_blank" },  // won't pile

        Link: "/ target=_blank"  // opens same window

Is it possible programmatically send it to the href. I can't change the href because not all pages need to open in a new window.

I changed the code to:

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

and added to the array a location:

          { name: "Home", Link: "/dashboard", place: "_self" },
           {name: "PubMed", Link: "/",
           place: "_blank"
         },

And they all open in new windows. All help is appreciated.

I have in Vue.js code

  <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>

The this gives me a footer with some links. I would like to have some of these links open an external window or tab.

The array that it loads from is:

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

This works but it open in the same window, I've tried:

        { 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 pile

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

Is it possible programmatically send it to the href. I can't change the href because not all pages need to open in a new window.

I changed the code to:

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

and added to the array a location:

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

And they all open in new windows. All help is appreciated.

• javascript
• vue.js

Share Improve this question Follow asked Jan 26, 2019 at 21:31 BillBill 1,48722 gold badges3434 silver badges6666 bronze badges 3

• you're missing the : in :target="link.place" – Daniel Beck Commented Jan 26, 2019 at 21:36
• 1 Like Daniel mentionned you forgot the :. Please consider adding rel="noopener noreferrer" for the links with target="_blank". You can learn more about this: mathiasbynens.github.io/rel-noopener – Samuel Vaillant Commented Jan 26, 2019 at 21:40
• Thank you to all-- you are great – Bill Commented Jan 26, 2019 at 21:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try this (jsfiddle):

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

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

本文标签： javascriptVuejs open link in new windowStack Overflow