Vuetify中字段空值（含空格）判断异常，求助实现正确显示逻辑

问题根源 #

你之前的判断逻辑只处理了null和空字符串''，但没考虑全空格的情况——输入空格后，字段值是长度大于0的字符串（比如' '），所以原来的item.claseExtraccion != null || item.claseExtraccion == ''、item.claseExtraccion.length == 0都会判定为“非空”，导致始终显示问号按钮。

解决方案 #

核心是先对字段做去空格处理，再判断是否为空，同时修正逻辑运算符的错误（原来用了||，应该用&&）。

1. 直接在模板中修正判断逻辑

修改Vuetify表格列的插槽代码：

<v-data-table :items="items">
  <template v-slot:item.claseExtraccion="{ item }">
    <!-- 仅当字段非null且去空格后不为空时，显示值和按钮 -->
    <div v-if="item.claseExtraccion != null && item.claseExtraccion.trim() !== ''">
      {{ item.claseExtraccion }}
      <v-btn icon><v-icon>mdi-help-circle</v-icon></v-btn>
    </div>
    <!-- 其余情况（null、空字符串、全空格）显示默认文本 -->
    <span v-else>Sin clase extracción</span>
  </template>
</v-data-table>

2. 封装工具函数复用（可选）

如果多个地方需要判断这种空值，可以在组件里定义一个工具函数：

// 组件的methods或setup中定义
isEmptyValue(value) {
  // 覆盖null、undefined、空字符串、全空格的情况
  return value == null || value.trim() === ''
}

然后在模板中使用：

<v-data-table :items="items">
  <template v-slot:item.claseExtraccion="{ item }">
    <div v-if="!isEmptyValue(item.claseExtraccion)">
      {{ item.claseExtraccion }}
      <v-btn icon><v-icon>mdi-help-circle</v-icon></v-btn>
    </div>
    <span v-else>Sin clase extracción</span>
  </template>
</v-data-table>

额外建议 #

如果后端没有做字段空格过滤，建议后端在保存数据时自动去除字段两端的空格，从根源避免这类问题；前端处理作为兜底方案即可。

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