Laravel+Vue下根据visibility字段值显示对应图标异常问题求助

常见原因排查 #

• 类型不匹配（最高发）：你现在代码里用严格相等===判断的是字符串格式的'1'/'2'/'3'，如果数据库返回的visibility是数字类型的1/2/3，严格相等会因为类型不一致返回false。至于取值2时功能正常，大概率是该场景下你有额外的转换逻辑，或者其他隐含的判断条件被满足了。
• 判断逻辑未互斥：当前三个渲染块都是独立的v-if判断，虽然三个取值理论上互斥，但如果出现project对象响应式丢失、字段拼写错误等问题，很容易出现判断异常。
• 图标资源混淆：可以先把两个图标的填充色改成完全不同的颜色测试下，避免因为视觉相似度高误以为渲染的是同一个图标。

具体修复步骤 #

1. 先加调试代码确认字段实际值，放在三个渲染块上方即可，调试完删掉：

<div>调试：visibility类型 = {{typeof project.visibility}}，取值 = {{project.visibility}}</div>

2. 根据调试结果修改判断逻辑：
   如果确认返回的是数字类型，去掉判断条件里的引号，同时把后面两个v-if改成v-else-if让逻辑互斥，修改后的代码如下：

<div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="project.team_members.length && project.visibility === 2">
  <div class="avatar-group">
    <img v-for="user in project.team_members" class="avatar avatar-xs" :src="user.avatar_url" :alt="user.name" :title="user.name"/>
  </div>   
</div>
<div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-else-if="project.visibility === 1">
  <div class="avatar-group">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="40" y="88" width="176" height="128" rx="8" stroke-width="16" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M92,88V52a36,36,0,0,1,72,0V88" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="152" r="12"></circle></svg>
  </div>
</div>
<div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-else-if="project.visibility === 3">
  <div class="avatar-group">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M40,114.66667V56a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v58.66667c0,84.01533-71.306,111.85016-85.5438,116.57058a7.54755,7.54755,0,0,1-4.9124,0C111.306,226.51683,40,198.682,40,114.66667Z" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="202.402 172.082 128 120 53.597 172.082" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
  </div>
</div>

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