简体   繁体   English

如何在 vue js 上传递一个 id @click?

[英]How to pass an id @click on vue js?

I want to pass id by this.id parameter but I can´t send and receive it.我想通过this.id参数传递id但我无法发送和接收它。 How can I send this.id for parameter on vue.js?如何在 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 // 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 https://v2.vuejs.org/v2/guide/events.html

You can do @click="activate"你可以做 @click="activate"

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

The other way is to pass the event, if you needed to pass more data另一种方法是传递事件,如果您需要传递更多数据

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM