VueJs open HREF in new tab with BootstrapVue

Question

I'm creating a table with bootstrap, one of the field is a link and should be opened in a new tab using target="_blank"

However, for some reason it doesn't work, any idea why ?

Thanks.

Full code :

<b-table striped hover
  :items="applications"
  :filter="filter"
  :fields="fields"
  :bordered="true"
  :small="true"
  @filtered="onFiltered"
  >
  <template slot="lien" slot-scope="fields">
    <a :href="fields.value" :target="_blank">
    {{fields.value}}
    </a>
  </template>
</b-table>

EDIT :

Fixed with unbinding the target attribute thanks to Jom

Working code :

<b-table striped hover
  :items="applications"
  :filter="filter"
  :fields="fields"
  :bordered="true"
  :small="true"
  @filtered="onFiltered"
  >
  <template slot="lien" slot-scope="fields">
    <a :href="fields.value" target="_blank">
    {{fields.value}}
    </a>
  </template>
</b-table>

No need to bind the target attribute here. Simply target="_blank" should work. — Yom T.
– Yom T., Commented Jan 21, 2019 at 9:11
@jom Jom, it works great now. Monday mornings you know ... Thanks a lot ! — Cesar
– Cesar, Commented Jan 21, 2019 at 9:27

Rubin bhandari · Accepted Answer · 2019-01-21 09:44:32Z

4

I think you dont need to bind the target value as _blank is not a model

answered Jan 21, 2019 at 9:44

Rubin bhandari

1,94117 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs open HREF in new tab with BootstrapVue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related