v-if元素在条件为假值时仍显示的技术问题求助

我的v-if元素无论条件是null、'null'、false或其他假值时，都会显示出来。以下是最小可复现代码：

<select id="city-select" multiple :disabled="citiesLoading" v-model="selectedCities">
  <option value="">Select cities</option>
  <option v-for="city in cities" :value="city.lID" :key="city.lID">
    {{ city.lCity }}<span v-if="city.lAdminName">, {{ city.lAdminName }}</span>
    <span v-if="city.lCapital">({{ city.lCapital }})</span>
  </option>
</select>

预期结果：

• 选中瓜德罗普时：
  • "Pointe-à-Pitre, ()" 应显示为 "Pointe-à-Pitre"
  • "Basse-Terre, (primary)" 应显示为 "Basse-Terre (primary)"

我特意将其中一个字段设为null，另一个设为空字符串，以此证明两者都会导致不符合预期的结果。试了多种方法都没解决，请问哪里出错了？

1. 先确认数据的实际值 #

你说把字段设为null或空字符串，但如果实际数据是字符串"null"或空格字符串" "，这些在Vue的v-if判断中都会被视为真值（非空字符串都是真值），导致span被渲染。

可以在控制台打印cities数组，检查目标字段的实际值：

console.log(cities);

确保city.lAdminName确实是""（空字符串），city.lCapital确实是null而非字符串"null"。

2. 修正模板的格式问题 #

即使数据没问题，模板中标签与文本紧贴的写法可能导致浏览器解析时保留空白字符，加上select的option对空白的处理方式，会出现视觉上的多余逗号、空格或括号。

把条件判断的span与前面的文本换行，同时调整标点的位置（比如把空格放到span内部）：

<select id="city-select" multiple :disabled="citiesLoading" v-model="selectedCities">
  <option value="">Select cities</option>
  <option v-for="city in cities" :value="city.lID" :key="city.lID">
    {{ city.lCity }}
    <span v-if="city.lAdminName">, {{ city.lAdminName }}</span>
    <span v-if="city.lCapital"> ({{ city.lCapital }})</span>
  </option>
</select>

或者用更简洁的表达式直接拼接内容，彻底避免标签带来的空白问题：

<option v-for="city in cities" :value="city.lID" :key="city.lID">
  {{ city.lCity }}
  {{ city.lAdminName ? ', ' + city.lAdminName : '' }}
  {{ city.lCapital ? ' (' + city.lCapital + ')' : '' }}
</option>

这样就能确保只有当字段存在有效值时，才会显示对应的标点和内容，解决假值条件下的多余字符问题。

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