Question

让我说我有用户个人资料，这是用户图片：

<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（如果为false），因为它会更改v-if ...

那么在Vue组件中向非所有者用户隐藏某些元素的正确方法是什么？

谢谢

结合Vue和Laravel的正确方法

0 个答案: