v-toggle的自定义按钮激活

问题描述 投票:0回答:1

我有一组按钮,默认情况下,当用户按下按钮时,该按钮将变为活动状态。

        <v-btn-toggle
          id="button_toggle"
          v-model="buttonSelected"
          @change="onChange"
          tile
          group>
            <v-btn
              id="button_zero"
              value="0"
              Button 0
            </v-btn>
            
            <v-btn
              id="button_one"
              value="1"
              Button 1
            </v-btn>
            
            <v-btn
              id="button_two"
              value="2"
              Button 2
            </v-btn>
        </v-btn-toggle>
但是,是否有解决方案,可以通过代码中的ID更改按钮的类?因为当用户presses按钮时,不足以使其激活。像这样

if (condition) 
    activeButtonId = 2
            <v-btn-toggle
              id="button_toggle"
              v-model="buttonSelected"
              @change="onChange"
              active-item="activeButtonId"
              tile
              group>

我知道我可以更改类选项来操纵按钮的选择(class =“ v-item--active v-btn--active”,但这似乎不是最好的解决方案

javascript vuetify.js
1个回答
0
投票

您可以做这样的事情

new Vue({
  el: "#app",
  data: {
  Buttons: [
  {Name: 'BTN1', isActive: true},
  {Name: 'BTN2', isActive: false},
  {Name: 'BTN3', isActive: false}
  ]
  },
  methods: {
  setActive(btn) {
  for (let b of this.Buttons) { b.isActive = false }
  btn.isActive = true
  }
  }
})
.myButton {
  margin: 5px;
  background-color: grey;
  border: solid black 2px;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  outline: none;
}
.myButton:hover {
  background-color: green;
}
.myButtonActive {
  background-color: green;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<button 
class="myButton" 
v-for="btn in Buttons" 
@click="setActive(btn)" 
:class="{'myButtonActive': btn.isActive}"
>{{btn.Name}}</button>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.