Как скрыть эту кнопку

Question

Я создал проект наподобие instagram, используя laravel и vue.js. у него есть такие модели, как: профиль, пост, пользователь. Я просто хочу скрыть кнопку «следовать», когда пользователь хочет следовать за собой. В настоящем приложении 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-if, если условие вряд ли изменится во время выполнения.

Вы, вероятно, должны сделать что-то вроде этого:

//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>

Здесь вы можете узнать больше об условном рендеринге.