javascript - 如何在 vue js 上传递 id @click ?

标签 javascript html vue.js

我想通过 this.id 参数传递 id 但我无法发送和接收它。如何在 vue.js 上发送 this.id 作为参数?

<button 
    id="txt"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
>
    <i class='fas   fa-poll-h kind-icon'></i>
</button>
<button
    id="pic"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
    style="padding-left: 15px;"
>
    <i class='fas fa-image kind-icon'style="font-size: 30px;"></i>
</button>
<button
    id="sound"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
>
    <i class="material-icons kind-icon"style="font-size: 31px;top: 8px;margin-bottom: 13px;">music_video</i>
</button>

//js

activate: function(i) {
  console.log(i);
  switch (i) {
    case "txt":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;

    case "pic":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;

    case "sound":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;
    // 
    // default:
    //   $("#txt").css({"background-color": "#fe5d87", "color": "white"});
  }

最佳答案

https://v2.vuejs.org/v2/guide/events.html

您可以执行@click="activate"

methods: {
    activate: function (event) {
        console.log(event.target.id)
    }
}

如果您需要传递更多数据,另一种方法是传递事件

@click="activate('your custom data string', $event)"

关于javascript - 如何在 vue js 上传递 id @click ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68966924/

相关文章:

javascript - 类型错误 : Cannot read property “0” from undefined

javascript - 使用 JQuery 更改多个图像

php - 为什么 Vue 不读取我通过 PHP 作为 Prop 传递的整个 JSON 对象?

javascript - 使用 moment.js 检查日期格式

javascript - 如何将 React useState 钩子(Hook)解构到命名空间中?

javascript - 测试 HTML5 标签、事件和属性支持

javascript - 获取响应时出现问题

javascript - Vue.js 从另一个组件获取数据

javascript - 如何在 Vue.js 中导入 bootstrap 或外部 js

javascript - 如何获取 google webmasters api (Node.js) 的访问 token