条件渲染在vuejs v-if

Question

我有一个span标签，该标签在vuejs中使用v-if有条件地呈现。如果用户为空，则应该 不呈现，如果user不为null，则仅应呈现。现在，当用户登录时，它 正在显示，直到它可以正常工作为止，但是当用户单击注销时，则不应渲染，但仍应渲染

我的代码段如下

    <span class="user-options" id="user-opt" v-if="user">
      <ul class="user-details">
        <li style="background: #000000; color: white; text-align: center; line-height: 30px;">
          Welcome&nbsp;{{ user.username }}
        </li>
        <li style="text-align: center; background: white; color: black; line-height: 30px;">
          email&nbsp;{{ user.username }}
        </li>
        <li style="background: white; color: black; line-height: 30px;" v-if="user.verified">
          verified
          <span style="float: right; color: blue;">
            <i class="fas fa-check-circle"></i>
          </span>
        </li>
        <li style="line-height: 30px;" v-if="user.verified">
          total post
          <span style="float: right">
            {{ user.totalPost }}
          </span>
        </li>
        <li style="text-align: center; line-height: 30px;" v-on:click="logOut">
          logout
        </li>
      </ul>
</span>

当用户单击注销时，它仍然显示，直到我刷新页面并呈现span标签的某些内容

Answer 1

问题是v-if =“ user”

<span class="user-options" id="user-opt" v-if="user ">

代替上面的代码，我使用了这段代码，一切都解决了

  <span class="user-options" id="user-opt" v-if="user != null">