CODEWITHSUNDEEP
javascripthtmlcssvue.js
Visal
Visal

Reputation: 477

Directing to another link in VUEJS

I am making a New Tab extension with VUEJS and I need to find a way to redirect the person to the link they entered for their bookmark. For some reason, when I try to do this, it is not working? Can you please help?

HTML

<div id="bookmarks">
  <button v-for="bookmark in bookmarks" v-bind:title="bookmark.name + ('\n') + bookmark.url" id="apps_button" @click="bookmark_link"><img v-bind:src="('https://www.google.com/s2/favicons?domain=') + bookmark.url" />&nbsp;{{ bookmark.name }} 
  </button>
</div>

VueJS

data: {
  bookmarks: [
    { name: "Google", url: "https://www.google.com/?safe=active&ssui=on" },
    { name: "Amazon", url: "https://www.amazon.com" },
    { name: "Apple", url: "https://www.apple.com" },
    { name: "Netflix", url: "https://www.netflix.com" },
    { name: "eBay", url: "https://www.ebay.com" },
  ],
},
methods: {
  bookmark_link: function(bookmarks) {
    window.location.href = bookmarks.url;
  },
},

Any help please?

Upvotes: 0

Views: 112

Answers (1)

Venkatesh A
Venkatesh A

Reputation: 2474

The bookmark_link function asks for an argument, but you don't send one. So, send one and the href should work fine.

<div id="bookmarks">
  <button v-for="bookmark in bookmarks" v-bind:title="bookmark.name + ('\n') + bookmark.url" id="apps_button" @click="bookmark_link(bookmark)"><img v-bind:src="('https://www.google.com/s2/favicons?domain=') + bookmark.url" />&nbsp;{{ bookmark.name }} 
  </button>
</div>

Upvotes: 1

Related Questions