如何将参数传递为变量onclick和vue js答案

【问题标题】：How to a pass parameter be a variable onclick and vue js如何将参数传递为变量onclick和vue js
【发布时间】：2021-08-29 10:49:25
【问题描述】：

我想发送第二个参数，就像我在 js 上的变量一样，它是一个字符串，但我想在发送后成为变量

<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>

//js
function activate(id, rec) {
  let saver = rec.replace(/['"]+/g, ''); // i wanna rec be variable for using it to change style
  console.log(typeof saver);
  if (saver != id) {
    $("#" + saver).css({"background-color": "white", "color": "#fe5d87"});
  }
  saver = id;
  $("#" + saver).css({"background-color": "#fe5d87", "color": "white"});

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

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

你不能在你的 vue 模板中使用this.id。此外，您不需要jQuery，也不应将其与Vue.js 一起使用。见：Why not use jQuery with Vue.js for AJAX?。

相反，您可以编写一个方法、传递一个值并设置数据。然后在您的模板中应用样式，如果值匹配 :class="type === 'text' && 'selected'":

const app = new Vue({
  el: '#app',
  data() {
    return {
      type: null
    }
  },
  methods: {
    activate(type) {
      this.type = type;
    }
  },
})

.selected {
  background-color: #fe5d87; 
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div id="app">
  <button id="text" @click="activate('text')" class="kind-btn" :class="type === 'text' && 'selected'" type="button">
    <i class='fas fa-poll-h kind-icon' style="font-size: 30px;"></i>
  </button>
  <button id="pic" @click="activate('pic')" class="kind-btn" :class="type === 'pic' && 'selected'" 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" :class="type === 'sound' && 'selected'" type="button">
    <i class="material-icons kind-icon" style="font-size: 31px; top: 8px; margin-bottom: 13px;">music_video</i>
  </button>
</div>

【讨论】：