使用 Laravel 和 Vue.js 绑定到多个 class 名称

Question

我有一个显示项目列表的 vue 组件。我可以将任何项目标记为 "active"（布尔值）。该值被保存到数据库中。

例如，我总共可以有五个项目。其中三个可以标记为 "active"，其余两个不是。

当我的页面加载时，active/not 活动数据来自我的控制器，我将数据作为属性传递到我的 vue 组件。属性有一个可以切换 on/off 的属性 active。该值作为布尔值存储在数据库中。

这是我的组件的样子：

<template>
    <div class="item" :class="{'active' : isActive}" @click="handleClick($event, item)">
        <div v-if="item.icon" class="item-icon">
            <i :class="item.icon"></i>
        </div>
        <div class="item-title">
            {{ item.title }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Item',
        data() {
            return {
                isActive: false,
            }
        },
        methods: {
            async handleClick(event, item) {
                try {
                    let response = await axios.patch(`/path/${item.id}`, {
                        title: item.title,
                        active: !this.isActive,
                    });

                    if (response.status === 200) {
                        this.isActive = !this.isActive;
                        console.log('isActive: ', this.isActive);
                    } else {
                        console.error('Error: could not update item. ', response);
                    }
                } catch (error) {
                    console.error('Error: sending patch request. ', error);
                }
            },
        },
        props: {
            item: {
                type: Object,
                required: true,
            },
        },
    }
</script>

总的来说，系统运行正常。我的请求得到正确处理，数据得到正确更新。

如果我将模板更改为：

<div class="item" :class="{'active' : isActive}"
     @click="handleItemClick($event, item)">

我看到 class/ui 更新正确。但是，因为初始数据来自 Laravel（控制器），所以我需要两个类。

所以我没有正确绑定到类，因此当我单击时，ui 会正确更新。

编辑

非常感谢您的建议。我更新了我的组件逻辑以反映什么是正常工作的。当事情分崩离析时，我会更改模板以说明某个项目是否已经处于活动状态：

<div class="item" :class="{'active' : isActive, 'active': item.active}"
     @click="handleClick($event, item)">

逻辑仍然有效（当我刷新页面时）但 UI 不会动态更新。

Answer 1

您可以设置一个计算的属性来计算组件中的 item.active 和 isActive，例如：

computed: {
  bindActive() {
    return this.isActive || this.item.active;
  }
}

因此您只能在模板语法中设置一个 class：

<div class="item" :class="{'active' : bindActive}"  @click="handleItemClick($event, item)">...</div>

Answer 2

首先感谢大家的建议；这是一个巨大的帮助！

我希望我可以帮助其他人，所以这就是我的想法。

<template>
    <div class="item" :class="{'active': isActive}"
         @click="handleClick($event, item)">
        <div v-if="item.icon" class="item-icon">
            <i :class="item.icon"></i>
        </div>
        <div class="item-title">
            {{ item.title }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Item',
        data() {
            return {
                isActive: this.item.active,  // <-- this was my error
            }
        },
        methods: {
            async handleClick(event, item) {
                try {
                    let response = await axios.patch(`/path/${item.id}`, {
                        title: item.title,
                        active: !this.isActive,
                    });

                    if (response.status === 200) {
                        this.isActive = response.data.item.active;
                    } else {
                        console.error('Error: could not update item. ', response);
                    }
                } catch (error) {
                    console.error('Error: sending patch request. ', error);
                }
            },
        },
        props: {
            item: {
                type: Object,
                required: true,
            },
        },
    }

希望这对某人有所帮助！

使用 Laravel 和 Vue.js 绑定到多个 class 名称

Bind to multiple class names with Laravel & Vue.js

laravel

vue.js

vue-component

vuejs2

laravel-6