Question

我使用laravel和vue.js建立了一个像instagram这样的项目。它具有以下模型：个人资料，帖子，用户。我只想在用户想要跟随自己时隐藏关注按钮。在真正的instagram应用中，我们无法关注自己，因为我们自己的个人资料中没有任何关注按钮。我设定了一个条件，如果配置文件的userId等于userId，则该按钮将隐藏，但不起作用。有什么意见吗？请帮助

这是我尝试过的代码：

$profileId=auth()->user()->$profile->user_id; 
$userId= $user->id;

在视图中：

@if($userId == $profileId) 
    <follow-button my-user-id="{{ $user->id }}" my-profile-id="{{$profileId}}" follows="{{ $follows }}"></follow-button> 
@endif

Answer 1

看看您提供的代码，我认为follow button是一个vue组件。如果是这样，只需使用v-if=""或v-show=""有条件地显示按钮即可。

从文档中

v-if是“真实的”条件渲染，因为它可以确保条件块内的事件侦听器和子组件在触发期间正确销毁并重新创建。

v-if也很懒：如果条件在初始渲染时为假，则它不会做任何事情-在条件首次变为真之前，条件块将不会渲染。

相比之下，v-show要简单得多-不论初始条件如何，都始终使用基于CSS的切换来呈现元素。

通常来说，v-if的切换成本较高，而v-show的初始渲染成本较高。因此，如果您需要经常切换某些内容，则首选v-show；如果条件不太可能在运行时改变，则首选v-show。

您可能应该执行以下操作：

//In your view where you want to display the follow button component:
<follow-button
    my-profile-id="{{ $profileId }}"
    my-user-id="{{ $user->id }}"
    follows="{{ $follows }}"
    v-if="{{ $profileId !== $user->id }}"
>
</follow-button>

您可以在这里read more进行条件渲染。

如何隐藏此关注按钮

1 个答案: