Правильный способ сочетания Vue и Laravel - PullRequest
0 голосов
/ 08 октября 2018

Допустим, у меня есть профиль пользователя, и это изображение пользователя:

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

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...