CODEWITHSUNDEEP
javascripthtmlvue.js
Jae
Jae

Reputation: 1157

How to dynamically get value of button using VueJS

I have created a dynamic list of buttons, which have genres of music.

When users click on a button genre, example: Pop, I need to perform a search for media that matches that genre. Users can select more than 1 button. So, maybe they want to see Pop, Rock, and Rap music genres.

My problem is, I can't seem to find a way to get the genre of the button (Pop, Rock, Rap, etc.) from my index.html and send it to my VueJS to re-perform the search.

This is my script.js, and the method I am trying to implement right now. Unfortunately, it only ever prints out undefined:

// Get Selected Genres
getGenre(value) {
  alert('Hello ' + this.value); // trying to print out Pop, Rock, Rap, etc.
}

I've tried the following in index.html, where I am trying to pass in the value to the getGenre function, but it just makes the web page fail to load. I've also tried this without the {{ }}, but it just prints undefined.

<li v-for="buttons in buttonsList" style="display: inline;">
    <button v-if="ShowALLButton" v-on:click="getGenre({{buttons}})" class = "btn" style="border: 2px solid darkgrey; margin:2px;">{{ buttons }}</button>
</li>

I've also tried this in script.js:

// Get Selected Genres
getGenre: function(event) {
  alert('Hello ' + this.value);
}

As well as this in my index.html, where I try to set the value to buttons (both WITH and without {{ }}), but it prints undefined.

<li v-for="buttons in buttonsList" style="display: inline;">
    <button v-if="ShowALLButton" v-on:click="getGenre()" value="buttons" class = "btn" style="border: 2px solid darkgrey; margin:2px;">{{ buttons }}</button>
</li>

Basically, I need to know what the button value is so I can re-do my search and show only media in the selected genres, but I am struggling with VueJS syntax. How can I do this?

Upvotes: 0

Views: 75

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

There's no need to use template interpolation within the v-for as the buttons is an expression of type string | null | number | object | array | undefined, so you can just pass that as an argument:

v-on:click="getGenre(buttons)"

Upvotes: 1

Related Questions