在Vue中如何判断带类型声明的data属性是否已被赋值？

问题根因 #

你混淆了 Vue 中 data 和 props 的定义规则：你当前写在 data 里的 DimensionSetting 初始值是一个{ type: String }的对象，而非空字符串，所以你之前写的所有判断逻辑都不生效。

分场景解决方法 #

场景1：DimensionSetting 是父组件传入的属性

不要把它定义在 data 中，要移到 props 配置项：

export default {
  // 正确的props定义写法
  props: {
    DimensionSetting: {
      type: String,
      default: '' // 可设置默认值为空字符串
    }
  }
}

模板中直接写判断即可，不需要加this：

<!-- DimensionSetting为空时显示元素，有值时隐藏 -->
<div v-if="!DimensionSetting">需要显示的元素</div>

场景2：DimensionSetting 是组件内部的响应式状态

修改data中的初始值，不要写props的类型定义格式：

data() {
  return {
    // 初始值设为空字符串
    DimensionSetting: ''
  }
}

判断逻辑和上述模板写法一致，直接用!DimensionSetting即可生效。

特殊情况兼容 #

如果需要排除全空格的无效字符串，可以改成以下判断：

<div v-if="!DimensionSetting.trim()">需要显示的元素</div>

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