使用 Laravel 和 Vue.js 绑定到多个类名答案

【问题标题】：Bind to multiple class names with Laravel & Vue.js使用 Laravel 和 Vue.js 绑定到多个类名
【发布时间】：2020-02-13 18:05:54
【问题描述】：

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

例如，我总共可以有五个项目。其中三个可以标记为“活动”，其余两个则不是。

当我的页面加载时，活动/非活动数据来自我的控制器，我将数据作为属性传递给我的 vue 组件。该属性有一个属性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)">

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

所以不知何故，我没有正确绑定到类，所以当我点击时，ui 会正确更新。

编辑

非常感谢您的建议。我更新了我的组件逻辑以反映正常工作的内容。当事情崩溃时，我更改模板以说明项目是否已处于活动状态：

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

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

【问题讨论】：

:class="{ active: isActive || item.active }" 也许？

标签： laravel vue.js vuejs2 vue-component laravel-6

【解决方案1】：

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

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

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

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

【讨论】：

是的，我已经习惯了类 api :-/
唯一想到的是item 是否来自循环，例如v-for="item in items"。如果是这样，OP 将无法使用计算属性
非常感谢！我认为这很接近。我认为我正在努力解决的问题是我无法为所有内容设置isActive: false,。由于 item 可能已经处于活动状态，通过将 data 属性设置为 false，vue 认为默认情况下所有内容都处于非活动状态。有动态设置data属性这种东西吗？
好吧，您可以随时更改isActive 变量——实际上您可以在代码中进行更改。您希望它默认处于活动状态，并且仅在项目（来自 api 调用时）将 active 设置为 false 时才切换为 false？
正确。如果该项目从 api 返回为活动状态，那么我需要将 isActive 设置为 false。但是，如果另一个项目从 api 返回为（未激活），那么我需要将 isActive 设置为 true。当我的页面加载时，vue 组件会从一个控制器中填充——它包含每个项目的所有数据（活动或非活动）。

【解决方案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,
            },
        },
    }

希望这对某人有所帮助！

【讨论】：