Допустим, у меня есть профиль пользователя, и это изображение пользователя:
<div class="user-image">
<img src="{{ $user->image }}">
</div>
И если я захожу в профиль как владелец:
<div class="user-image">
<img src="{{ $user->image }}">
<div class="change">
<input type="file" name="userImage">
</div>
</div>
В laravel мы можем сделать это с:
<div class="user-image">
<img src="{{ $user->image }}">
@if(auth()->user() && auth()->user()->id === $user->id)
<div class="change">
<input type="file" name="userImage">
</div>
@endif
</div>
Теперь я достигаю этого в Vue следующим образом:
Шаблон 1 как <user-image>
:
<div class="user-image">
<img src="{{ $user->image }}">
<slot name="changeImage"></slot>
</div>
Шаблон 2 как <change-image>
:
<div class="change">
<input type="file" name="userImage">
</div>
Теперь я использую это в profile.blade.php
:
<user-image>
@if(auth()->user() && auth()->user()->id === $user->id)
<change-image></change-image>
@endif
</user-image>
Это прекрасно работает, но как я могу это сделать, если я использую весь фронт в Vue, где я делаю все в App.vue изатем вывести его на базовую страницу?
Я думаю, я могу использовать v-if с чем-то вроде window.isOwner = true;
И затем я добавляю его в хранилище vuex как:
state: {
isOwner: window.isOwner;
}
И использовать this.$store.state.isOwner with v-if or v-show
, но мы также можем получить доступ к состоянию через консоль браузера:
document.getelementbyid('app').__vue__.$store.state.isOwner
и изменить его на true, если оно ложно, и из-за этого изменит v-if ...
Итак, как правильно скрывать какой-либо элемент от пользователей, не являющихся владельцами, в компонентах vue?
Спасибо