在Vue.js中如何通过@click点击事件传递元素的id参数

核心问题说明 #

你代码里的写法有两个核心错误：

1. Vue模板中的this指向的是当前Vue组件实例，不是你点击的DOM元素，所以this.id拿到的是Vue实例的id属性，不是按钮DOM的id
2. 你的activate函数里的this同样指向Vue组件实例，$("#" + this)这段代码完全错误，你应该用传进来的参数i

解决方法1：直接传递固定id（最适合你当前场景） #

你这几个按钮的id都是固定写死的，直接手动传对应字符串就行，不用读取DOM属性：

<button 
    id="txt"
    @click="activate('txt')"
    class="kind-btn"
    type="button"
>
    <i class='fas fa-poll-h kind-icon'></i>
</button>
<button
    id="pic"
    @click="activate('pic')"
    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('sound')"
    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);
  // 把之前的this换成传进来的i即可，你原来三个分支逻辑完全一致，不需要写switch
  $("#" + i).css({"background-color": "#fe5d87", "color": "white"});
}

解决方法2：通过事件对象读取DOM id #

如果你后续id是动态生成的不想手动传，可以用Vue提供的$event对象拿到当前触发事件的DOM元素：

<button 
    id="txt"
    @click="activate($event)"
    class="kind-btn"
    type="button"
>
<!-- 其他按钮同理修改@click参数即可 -->

然后修改js：

activate: function(e) {
  // 用currentTarget而不是target，避免点击按钮内部的<i>标签时，拿到的是i元素的id
  const id = e.currentTarget.id;
  console.log(id);
  $("#" + id).css({"background-color": "#fe5d87", "color": "white"});
}

更符合Vue规范的写法（推荐） #

Vue不推荐直接操作DOM，你可以用动态绑定class的方式实现同样效果，不需要用到jQuery：
首先在组件data里加一个activeTypeId变量：

data() {
  return {
    activeTypeId: ''
    // 保留其他原有数据
  }
}

模板里绑定class：

<button 
    id="txt"
    @click="activeTypeId = 'txt'"
    :class="['kind-btn', {active: activeTypeId === 'txt'}]"
    type="button"
>
    <i class='fas fa-poll-h kind-icon'></i>
</button>
<button
    id="pic"
    @click="activeTypeId = 'pic'"
    :class="['kind-btn', {active: activeTypeId === 'pic'}, {'pl-15': true}]"
    type="button"
>
    <i class='fas fa-image kind-icon' style="font-size: 30px;"></i>
</button>
<button
    id="sound"
    @click="activeTypeId = 'sound'"
    :class="['kind-btn', {active: activeTypeId === 'sound'}]"
    type="button"
>
    <i class="material-icons kind-icon" style="font-size: 31px;top: 8px;margin-bottom: 13px;">music_video</i>
</button>

然后在css里加对应样式：

.kind-btn.active {
  background-color: #fe5d87;
  color: white;
}
.pl-15 {
  padding-left: 15px;
}

这种写法完全不需要写额外的点击事件逻辑，更符合Vue的数据驱动思想。

内容的提问来源于stack exchange，提问作者ali shamsi