Vue.js app opening url links from a drop down in a new page

Question

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. 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? I am trying to stay with the Vue best practices method if I can. This should be a simple solution to look up but I have not found the solution.

Answer 1

尝试在里面使用target="_blank" ：

<a :href="li.href" target="_blank"> <i class="material-icons">{{ li.icon }}</i> </a>

Answer 2

我对标记的其余部分不太确定，但我建议您从 linksExternal 对象中删除目标部分，并将其放入<a>元素中，如下所示

<a :href="li.href" target="_blank">Cool link that opens in another page</a>

Answer 3

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

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