如何使用VueJS动态获取按钮的值

Question

我创建了一个动态按钮列表，其中包含音乐流派。

当用户单击按钮类型（例如：流行音乐）时，我需要搜索与该类型匹配的媒体。用户可以选择超过 1 个按钮。所以，也许他们想看到流行、摇滚和说唱音乐流派。

我的问题是，我似乎无法找到一种方法从我的按钮中获取按钮的流派（流行、摇滚、说唱等）index.html并将其发送到我的 VueJS 来重新执行搜索。

这是我的script.js，也是我现在正在尝试实施的方法。不幸的是，它只打印出来undefined：

// Get Selected Genres

getGenre(value) {

  alert('Hello ' + this.value); // trying to print out Pop, Rock, Rap, etc.

}

我在 中尝试了以下操作index.html，我试图将值传递给 getGenre 函数，但它只会使网页无法加载。我也尝试过不使用{{ }}，但它只打印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>

我也尝试过script.js：

// Get Selected Genres

getGenre: function(event) {

  alert('Hello ' + this.value);

}

以及在我的 中index.html，我尝试将值设置为buttons（带和不带 {{ }}），但它打印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>

基本上，我需要知道按钮的值是什么，以便我可以重新进行搜索并仅显示所选类型的媒体，但我在 VueJS 语法方面遇到了困难。我怎样才能做到这一点？

Answer 1

不需要在 中使用模板插值，因为v-for是buttons类型的表达式string | null | number | object | array | undefined，因此您可以将其作为参数传递：v-on:click="getGenre(buttons)"