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

Posted 2023-02-23

【中文标题】使用 Laravel 和 Vue.js 绑定到多个类名

【英文标题】：Bind to multiple class names with 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 " 也许？

【参考方案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,
            ,
        ,
    

希望这对某人有所帮助！