Vue.js中onclick事件如何将变量作为参数进行传递

你现在将group_question.active包裹在单引号中传入，所以参数本身就是字符串类型，而非变量对应的实际值，就算去掉引号字符也还是字符串，不会自动解析为对应的变量值。

直接去掉onclick参数中group_question.active外层的引号，直接传递变量本身即可：

<button id="txt" onclick="activate(this.id, group_question.active)" class="kind-btn" type="button">
  <i class='fas fa-poll-h kind-icon'></i>
</button>
<button id="pic" onclick="activate(this.id, group_question.active)" 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" onclick="activate(this.id, group_question.active)" class="kind-btn" type="button">
  <i class="material-icons kind-icon" style="font-size: 31px;top: 8px;margin-bottom: 13px;">music_video</i>
</button>

此时activate函数接收的第二个参数就是Vue实例中active属性的实际值，不需要额外做字符串替换处理。

如果业务场景要求必须传递字符串格式的变量路径，可以写一个通用方法解析字符串路径拿到对应的变量值：

// 解析字符串形式的变量路径，返回对应值
function getValueByPath(path) {
  return path.split('.').reduce((prev, curr) => {
    return prev ? prev[curr] : null
  }, window)
}

function activate(id, rec) {
  // 直接解析路径拿到实际值
  let saver = getValueByPath(rec)
  if (saver != id) {
    $("#" + saver).css({"background-color": "white", "color": "#fe5d87"});
  }
  // 注意：局部变量赋值不会修改Vue实例属性，需要直接修改group_question.active
  group_question.active = id;
  $("#" + id).css({"background-color": "#fe5d87", "color": "white"});
}

你已经使用了Vue框架，手动操作DOM修改样式不符合Vue的数据驱动设计思想，更推荐用Vue的动态绑定能力实现按钮高亮，不需要额外写activate函数和jQuery操作：

<div id="cr_que">
  <button id="txt" @click="active = 'txt'" :class="{active: active === 'txt'}" class="kind-btn" type="button">
    <i class='fas fa-poll-h kind-icon'></i>
  </button>
  <button id="pic" @click="active = 'pic'" :class="{active: active === '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="active = 'sound'" :class="{active: active === '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>
</div>

/* 把高亮样式写在CSS类里 */
.kind-btn.active {
  background-color: #fe5d87;
  color: white;
}

var group_question = new Vue({
  el: '#cr_que',
  data: {
    active: "txt"
  }
})

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