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

Question

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

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

当页面加载时，活动/非活动数据来自控制器，并且我正在将数据作为属性传递给vue组件。该属性具有可以切换为开/关的属性active。该值作为布尔值存储在数据库中。

这是我的模板的样子：

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

以后：

...
data() {
    return {
        isActive: false,
    }
},
methods: {
    async handleItemClick(event, item) {
            try {
                let response = await axios.patch(`/path/${item.id}`, {
                    active: !this.isActive,
                    ...
                });

                if (response.status === 200) {
                    this.isActive = !this.isActive;
                } else {
                    console.error('Error: could not update item. ', response);
                }
            } catch (error) {
                console.error('Error: sending patch request. ', error);
            }
        },
    },
    ...

总体而言，系统正在运行。我的请求已得到正确处理，数据正在正确更新。

如果我将模板更改为此：

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

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

因此，某种程度上我无法正确地绑定到类，因此单击时UI会正确更新。

Answer 1

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

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

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

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