CODEWITHSUNDEEP
vue.js
Vzupo
Vzupo

Reputation: 1478

vuejs bind url from data to click method

I have a set of data that has urls nested in the data model. I want to bind the url from from the data to click event. Right now it does not get the exact url just the variable. It should open the url in the data in a blank tab.

new Vue({
  el: "#app",
  data: {
    chocs: [
      { url: "https://yahoo.com"},
   
    ]
  },
  methods: {
    myclick2: function(choc){
    alert("test")
    window.open(choc.url)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 
  <h2>
  my hat
  </h2>
  <button v-on:click="myclick2(choc)">
  my link
  </button>
</div>

Upvotes: 1

Views: 480

Answers (2)

zerbene
zerbene

Reputation: 1502

There are multiple little error in your code

First the correct code:

new Vue({
  el: "#app",
  data() {
    return {
      chocs: 
        { url: "https://yahoo.com"},
    }
  },
  methods: {
    myclick2: function(){
      alert("test ")
      window.open(this.chocs.url, "_blank")
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 
  <h2>
  my hat
  </h2>
  <button v-on:click="myclick2()">
  my link
  </button>
</div>

List of errors:

  • the data part is written as data(){return{...}}
  • in your function you were calling choc instead of chocs (you have access to the data, don't pass something that is undefined as parameter)
  • because you use data, you need to call it with this
  • based on the structure from chocs, you have an object in an array (the first place in the array; index 0) OR based on your comment -> remove this brackets [ ]
  • if you want to open a new window, you can add "_blank"

Upvotes: 1

Hades
Hades

Reputation: 126

You have defined the data as an array named chocs. Containing an object with an url.

This would be saved as follows:

cohc: [
  { url: "https://yahoo.com/" }
]

This array could contain more items, but right now it only contains this one item. If you want to "open" that item you would do something like the following:

cohcs: [
  { url: "https://yahoo.com/" }
]

console.log(cohcs[0]) // returns: { url: "https://yahoo.com/" }

The 0 is the index of the array.

In case of the code provided above, you can define your v-on:click event like this:

<button v-on:click="myclick2(chocs[0])">

If you only want to save one link. you could also define your data as

  data: {
    chocs: { url: "https://yahoo.com"}
  },

Upvotes: 0

Related Questions