vuejs bind url from data to click method

Question

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>

zerbene · Accepted Answer · 2021-11-28 09:38:31Z

1

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"

edited Nov 28, 2021 at 9:38

answered Nov 28, 2021 at 0:01

zerbene

1,5122 gold badges10 silver badges22 bronze badges

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

2 Comments

Vzupo Over a year ago

what if i don't want it to go to a set index. It wont always be 0, just need to go to what is there...without the [0]

zerbene Over a year ago

I edit my code -> remove [ ] brackets

Dharman · Accepted Answer · 2021-11-28 00:06:11Z

0

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"}
  },

edited Nov 28, 2021 at 0:06

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 28, 2021 at 0:00

Hades

1363 bronze badges

2 Comments

Vzupo Over a year ago

what if i don't want it to go to a set index. It wont always be 0, just need to go to what is there...without the specific index...would like to make this.chocs.url work

Hades Over a year ago

If you don't want to go to a set index, but for instance show a button for every item in the array you can use [vuejs.org/v2/guide/list.html](list rendering). If you would like to open every link in the array from the one button you can use a for loop or something [w3schools.com/js/js_loop_for.asp](similar.)

Collectives™ on Stack Overflow

vuejs bind url from data to click method

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related