在 Vue.js 中有条件地切换类答案

【问题标题】：toggle class conditionally in Vue.js在 Vue.js 中有条件地切换类
【发布时间】：2018-12-15 18:43:12
【问题描述】：

我试图在 Vue.js（我最近才开始学习）中切换一个元素的类（被点击的按钮的父级）。

这个想法是disabled 类将在included 为不为真时应用。

我创建了一个 toggleClass 函数，但它似乎没有被调用。

HTML

<div id="app">
    <div class="item" v-for="item in items" :id="item.id" :key="item.id">
        <span>{{item.amt}}</span>
        <button v-on:click="item.included = !item.included" v-on:click="toggleClass()">exclude me</buton>
    </div>
    <br>
    <div id="total">total: {{ itemTotal }}</div>
</div>

VUE

var app = new Vue({
        el: "#app",
        data: {
            items: [
                {
                    id: 'item1',
                    included: 'true',
                    amt: 10,
                    className: 'disabled'
                },
                {
                    id: 'item2',
                    included: 'true',
                    amt: 20,
                    className: 'disabled'
                },
                {
                    id: 'item3',
                    included: 'true',
                    amt: 30,
                     className: 'disabled'
                }
            ]
        },
        methods: {
            toggleClass: function () {
                if(this.included) {
                    console.log('test');

                    // code to toggle the 'disabled' class here?
                }
            }
        },

        computed: {
            itemTotal() {
                return this.items.reduce(function (sum, item) {
                    if (item.included) {
                        return item.amt + sum;
                    }

                    return sum;
                }, 0)
            }
        }
    });

【问题讨论】：

谢谢伯特，但不……那不是我想要的。我希望按钮始终可以切换。它只是我将灰显的值本身 - 这就是为什么我希望在“项目”Div 上禁用禁用类（所以我可以使用 CSS 将值灰显）
像这样：codepen.io/Kradek/pen/PaMWgJ
是的，正确的@Bert！ :)

标签： vue.js

【解决方案1】：

<div v-bind:class="{ disabled:!included }"></div>

也许尝试使用类绑定： doc

【讨论】：

嗨，谢谢，但这引发了一个错误：无效的表达式：意外的令牌！在 { !included: disabled }

【解决方案2】：

多亏了 Timothy 的建议，它才得以运行，几乎就在那里。它只是缺少.item 部分。

应该是这样的

<div v-bind:class="{ disabled:!item.included }"></div>

【讨论】：