如何將參數傳遞為變量onclick和vue js

Question

我想在 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"
  },

Answer 1

你不能在你的 vue 模板中使用this.id 。 此外，您不需要jQuery ，也不應該將它與Vue.js一起使用。 請參閱： 為什么不將 jQuery 與 Vue.js 一起用於 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>