Vue.js 中针对计算属性的简单 v-if 判断逻辑不生效问题

• 核心触发故障：v-if表达式的逻辑不符合JS运算规则
  你编写的v-if="!profile_full_name===''存在优先级偏差：JS中逻辑非!的执行优先级远高于相等判断运算符，该表达式实际执行顺序为(!profile_full_name) === ''。由于!运算的输出是布尔值（true/false），布尔值与空字符串做严格相等比较的结果永远为false，因此v-if分支永远无法触发，所有场景都会进入v-else分支，和你描述的现象完全匹配。
• 潜在逻辑漏洞：计算属性的空值判断边界不严谨
  原有计算属性直接将profile_name和profile_family拼接固定空格后返回，哪怕两个状态值都为空，最终输出的也是单个空格字符串' '，而非空字符串''。如果仅修正判断逻辑不处理该问题，会导致全空格的拼接结果被判定为非空，达不到空值判断的预期。

1. 优化计算属性逻辑，消除拼接产生的多余空格，确保空值场景返回严格的空字符串：

   profile_full_name() {
     const name = this.$store.state.profile_name?.trim() || ''
     const family = this.$store.state.profile_family?.trim() || ''
     // 过滤空值后用空格拼接，避免出现开头/结尾多余空格、单空格伪空值问题
     return [name, family].filter(Boolean).join(' ')
   }
   

   该逻辑在任意字段为空时不会拼出冗余空格，所有字段全空时会直接返回真正的空字符串''。
2. 修正v-if判断逻辑，匹配实际渲染需求：
   空字符串在JS布尔判断中属于falsy值，直接对计算属性取反即可判断空值状态，最终模板代码为：

   <!-- 当profile_full_name为空字符串时，渲染当前分支 -->
   <span v-if="!profile_full_name">
       @{{ profile_full_name }}
   </span>
   <!-- 当profile_full_name非空时，渲染else分支 -->
   <span v-else>
       {{auth()->user()->fullName}}
   </span>
   

   注：模板中的@符号是Laravel Blade语法转义标识，用于避免Blade将Vue的插值语法识别为自身模板语法，该部分逻辑无问题。

内容的提问来源于stack exchange，提问作者DolDurma