当然有办法啦！在Vue里要把显示的null值替换为空字符串，我结合你的代码给你整理了几种好用的方案：

方案一：使用计算属性处理（推荐，符合单向数据流） #

因为你的组件是通过props接收value数据，最好遵循Vue的单向数据流原则，用计算属性来包装数据，同时处理null值：

export default {
  name: 'customer',
  props: {
    value: {
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    formattedCustomer: {
      get() {
        // 用空值合并运算符`??`判断，仅当address为null/undefined时替换为空字符串
        const address = this.value.address ?? '';
        // 解构原数据，只替换需要处理的字段
        return { ...this.value, address };
      },
      set(newVal) {
        // 把修改后的数据emit给父组件，保持单向数据流
        this.$emit('input', newVal);
      }
    }
  },
  // 你的其他methods...
}

然后把模板里的v-model改成绑定计算属性：

<template>
  <div class="flexItem">
    <ui-textbox 
      label="Address" 
      v-model="formattedCustomer.address" 
      :disabled="disabled" 
      name="address" 
      @input="update()" 
      v-validate="'max:255'" 
    ></ui-textbox>
  </div>
</template>

方案二：在数据初始化或更新时处理 #

如果更习惯直接操作data里的customer，可以在组件初始化或者监听value变化时，把null值替换为空字符串：

export default {
  name: 'customer',
  props: {
    value: {
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      customer: {
        address: "",
      }
    }
  },
  created() {
    this.initCustomer();
  },
  watch: {
    // 监听props的value变化，实时更新并处理null值
    value: {
      immediate: true,
      handler(newVal) {
        this.initCustomer(newVal);
      }
    }
  },
  methods: {
    initCustomer(val = this.value) {
      this.customer = {
        ...val,
        // 替换null/undefined为空字符串
        address: val.address ?? ''
      };
    },
    // 你的其他methods...
  }
}

这种方法不需要修改模板，直接用原来的v-model="customer.address"就可以。

方案三：Vue2专属：使用过滤器（仅适合单向显示场景） #

如果你用的是Vue2，还可以用过滤器来处理，但注意过滤器只适合单向显示的场景，因为v-model不能直接使用过滤器：

export default {
  name: 'customer',
  // ...其他配置
  filters: {
    nullToEmpty(val) {
      return val ?? '';
    }
  }
}

如果是纯显示的文本可以这么用：

{{ customer.address | nullToEmpty }}

但你的场景是双向绑定的输入框，所以前两种方案更适合。

小提示：这里用的??是空值合并运算符，比||更精准——它只会把null和undefined替换成空字符串，不会影响0、空字符串本身这些合法值。

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