条件渲染在 vuejs v-if 中不起作用
Posted
技术标签:
【中文标题】条件渲染在 vuejs v-if 中不起作用【英文标题】：conditional rendering is not working in vuejs v-if 【发布时间】：2020-11-15 19:02:47 【问题描述】：我有一个 span 标签，它在 vuejs 中使用 v-if 有条件地呈现。如果用户为空，那么它应该 不被渲染，如果用户不为空，那么只有它应该被渲染。现在当用户登录时，它 正在显示，直到这里它的工作，但是当用户点击注销时，它不应该呈现但仍然是它的呈现
下面是我的代码sn-p
<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 user.username
</li>
<li style="text-align: center; background: white; color: black; line-height: 30px;">
email 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>
当用户单击注销时，它仍然显示，直到我刷新页面它呈现一些跨度标记的内容
【问题讨论】：
您能否在您的网络浏览器中使用 VueJS 开发工具来检查user 的值是什么并在问题中显示出来。它就像user 不为空
user 是包含用户名、电子邮件、已验证、totalpost 等属性的对象
你可以添加你的代码执行注销吗？
感谢您的回复，我找到并修复了它
【参考方案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">
【讨论】：
以上是关于条件渲染在 vuejs v-if 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章