如何使用 laravel 从 vue.js 中的对象道具中突出显示类答案

【问题标题】：How to highlight the class from an object prop in vue.js with laravel如何使用 laravel 从 vue.js 中的对象道具中突出显示类
【发布时间】：2020-03-22 19:39:45
【问题描述】：

我在突出显示/切换类和显示数据方面需要帮助或建议

<chat-app :respondent="{{ $user[0]->respondent }}" :user="{{ auth()->user() }}"></chat-app>```

然后在 ChatApp.vue 文件中

<message-inbox :contact="respondent" :messages="messages"></message-inbox>

contact 属性包含我们将向其发送聊天的用户对象...包括他的 id 和显示名称以及其他基本详细信息..

现在我想获取所有消息，但还要突出显示特定受访者的消息。

<li class="bg-blue flex flex-no-wrap items-center text-black cursor-pointer p-3">
                <img class="flex justify-center items-center flex-no-shrink w-12 h-12 bg-grey rounded-full font-semibold text-xl text-white mr-3" :src="userAvatar" alt="">
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between mb-1">
                        <h2 class="font-semibold text-sm">
                            <i class="fas fa-users fa-fw"></i> {{  conversation.respondent }}
                        </h2>
                        <span class="text-sm">
                            <i class="fas fa-check fa-fw"></i>
                            10:00
                        </span>
                    </div>
                    <div class="text-sm truncate">
                        <span>
                            Some latest messages from this conversation.
                        </span>
                    </div>
                </div>
            </li>

props : {
        contact : {
            type : Object, 
            default : null
        },
        messages : { 
            type : Array,   
            default : []
        },
    }

【问题讨论】：

你知道要强调的具体受访者吗？
是的，联系人中有prop，但我想我必须循环当前登录用户发出的所有消息..
先生，我应该在这里做什么，我应该循环浏览用户发出的所有消息吗？
我认为您遍历所有消息，然后检查发送的消息是否与您在 props 中的消息相同，您应该使用 vue 类绑定突出显示该消息。
axios.get(this.fetch_messages_endpoint, { params : { user_id : api.user.id, respondent_id : this.contact.id } }).then(response => { this.conversations = response.data; // console.log(response.data); }).catch(error => { console.log(error); }); 这个人没有在mounted(){ this.fetch_messages(); }里面打电话

标签： laravel vue.js

【解决方案1】：

我认为您应该执行以下操作来突出提到的受访者。

将您的li 标签更改为以下代码：

<li class="bg-blue flex flex-no-wrap items-center text-black cursor-pointer p-3" :class="{'highlight': conversation.respondent == respondent}"> <img class="flex justify-center items-center flex-no-shrink w-12 h-12 bg-grey rounded-full font-semibold text-xl text-white mr-3" :src="userAvatar" alt=""> <div class="flex-1 min-w-0"> <div class="flex justify-between mb-1"> <h2 class="font-semibold text-sm"> <i class="fas fa-users fa-fw"></i> {{ conversation.respondent }} </h2> <span class="text-sm"> <i class="fas fa-check fa-fw"></i> 10:00 </span> </div> <div class="text-sm truncate"> <span> Some latest messages from this conversation. </span> </div> </div> </li>

在CSS 部分中添加突出显示class，如下所示：

.highlight { color: yellow; }

【讨论】：