Question

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

        <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更改按钮的类？因为当用户按下按钮时，不足以使其激活。像这样

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”），但这似乎不是最好的解决方案

Answer 1

您可以这样做

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>

v切换的自定义按钮激活

1 个答案: