如何使用 vue 中的按钮更新 v-bind:Class 项目答案

【问题标题】：How to updated v-bind:Class items using button in vue如何使用 vue 中的按钮更新 v-bind:Class 项目
【发布时间】：2021-05-07 05:43:14
【问题描述】：

我试图删除/更改已通过单击号码选择的彩票号码集（数组）中的类，但是当单击按钮删除时，所有选定号码上的类保持不变。请帮忙

代码如下：

<div class="body-border">
      <b-row no-gutters style="margin-top:10px;">
          <b-col  cols="2" v-for="lotre in lotres" :key="lotre.id">
            <div :class="{chooselotre: lotre.isActive}" class=" mx-auto " @click="pickticket($event,lotre.id); editColor(lotre);">                         
                    <p class="text-lotto text-center"> {{lotre.id}} </p>
              </div>
            </b-col>                            
      </b-row>
      <b-row>
    <button type="button" class="btn btn-pill btn-pick-clear" @click="removeAllTicket()">clear pick</button>                                    
      </b-row>                                   
 </div>


<script>
    import Vue from 'vue'
    
    export default {  
        data: () => ({
            lottos:[],
            lotres : [
                {
                    id: 1,
                    isActive: false,
                },
                {
                    id: 2,
                    isActive: false,
                }
                ,
                {
                    id: 3,
                    isActive: false,
                },]
    )},
    methods: {                      
            removeAllTicket: function() {
            this.lottos.splice(0,this.lottos.length);
            this.lotres.slice(0,this.lotres.isActive);
            },
            
    },
</script>

【问题讨论】：

标签： arrays vue.js class bind

【解决方案1】：

问题解决了，只需要在removeAllTicket()中添加循环即可。

for (lotre of this.lotres){
    if (lotre.isActive) {
     lotre.isActive = false
         }
       }

【讨论】：

【解决方案2】：

类绑定应该是这样的

:class="{'chooselotre': lotre.isActive, 'item-lotre2': lottos.length >= 6,  'item-lotre': lottos.length <= 6}"

并确保 removeAllTicket() 工作正常，并对数组进行所需的更改

【讨论】：

我变了，但还是一样。我在寻找 removeAllTicket() 可以改变类，你能帮忙吗？
为了启用特定的类，相应的条件应该评估为真。因此，请通过在您的方法中打印控制台日志来检查数组的长度是否发生变化