Vue2 v-if与v-else-if双条件渲染问题?

我在vue2中用v-if条件渲染不同的div元素。当v-if中的只有一个判断条件时渲染是正常的,但是有两个&&条件时就条件渲染不成功了(总是执行渲染v-else下的div元素)。这是为什么呢?
贴下代码:

                            <!--这里根据条件渲染不同的消息头部-->
                            <div class="msgcard-content-header" v-if="item.msg_unit == '添加参与人'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">邀请你加入到任务的参与人中</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else-if="item.msg_unit == '参与人' && item.msg_unit_action == '删除'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else-if="item.msg_unit == '负责人' && item.msg_unit_action == '添加'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">给你分配了任务</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else>
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>

item是dataList的数组项,里面的数据都是正确的。

阅读 704
avatarAI BotBETA

你的代码在逻辑上没有问题,v-ifv-else-if 应该可以正常工作,只要你的数据满足条件。如果 v-ifv-else-if 没有按预期工作,那么可能的问题可能在于 item.msg_unititem.msg_unit_action 的值。

这里有几个可能的问题点:

  1. 数据类型:确保 item.msg_unititem.msg_unit_action 的数据类型是你期望的。例如,如果它们是字符串,确保比较时它们确实是字符串,而不是其他类型(如数字或对象)。
  2. 大小写敏感:JavaScript 和 Vue.js 都是大小写敏感的,所以确保 item.msg_unititem.msg_unit_action 的值的大小写与你在 v-ifv-else-if 条件中使用的值完全匹配。
  3. 额外的空格或字符:有时,数据值中可能包含额外的空格或不可见的字符,这可能会干扰比较。确保 item.msg_unititem.msg_unit_action 的值没有额外的空格或字符。
  4. 条件逻辑:检查你的条件逻辑是否正确。在你的代码中,v-else-if 的条件在逻辑上应该是互斥的,这意味着它们不应该同时为真。如果两个条件都为真,那么 Vue.js 将只渲染第一个匹配的 v-else-if 条件。

要调试这个问题,你可以尝试以下步骤:

  • 在 Vue 组件的 createdmounted 生命周期钩子中,打印 item.msg_unititem.msg_unit_action 的值,以确保它们是你期望的值。
  • 在你的模板中,尝试添加一些临时的 v-ifv-else-if 条件来检查特定的值或条件是否为真。
  • 使用浏览器的开发者工具来检查渲染的 DOM,看看哪些元素实际上被渲染了。

通过这些步骤,你应该能够找出为什么条件渲染不按预期工作的原因。

1 个回答

只可能是 msg_unit 或者 msg_unit_action 的值有问题,可以在外部输出一下 item 整个对象出来看看各个属性值是否正确。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏