避免在 b 输入模糊时将 null 转换为空字符串答案

【问题标题】：Avoid converting null to empty string on b-input blur避免在 b 输入模糊时将 null 转换为空字符串
【发布时间】：2021-03-05 17:22:32
【问题描述】：

我在 Vue JS 2.6.6 中遇到了反应性问题。不确定这是否是一个问题，或者我在这里遗漏了一些东西。

我正在通过 axios 获取来自 MySQL DB 的对象：

resource:Object
   id: 123
   alt: null
   file:"2a72d890d0b96ef9b758784def23faa1.jpg" 
   type:"jpg"
}

表单正在通过 v-model 处理属性： <b-input v-model="resource.alt" />

我可以看到，在 blur 事件中，除了没有进行任何更改之外，resource.alt 属性正在从 null 更改为空字符串 ""

resource:Object
   id: 123
   alt: ""
   file:"2a72d890d0b96ef9b758784def23faa1.jpg" 
   type:"jpg"
}

那么处理这个问题的最佳方法是什么？我不认为从数据库中获取所有null 字段作为空字符串是一个很好的解决方案。我的意思是IFNULL(files.alt,'') AS alt

另一方面，由于我通过循环遍历所有记录并将所有空属性设置为空字符串来获取大量记录，因此看起来效率非常低。

我需要将null 属性保留为null 或以某种方式从一开始就将所有null 属性解析为empty 字符串。

仅供参考，我正在使用 vee-validate，所以如果对象已被操纵，我需要使用 pristine 标志来验证对象是否已更改，该标志设置为 false。由于从 null 更改为 ""

，此行为将标志设置为 false

编辑这越来越奇怪了。我将resource 传播到组件中的本地数据的方式是单击列表中的元素。

data: () => ({
        files: [],
        resource: {}
})

<div v-for="file in files" :key="file.id"
    @click.exact="handleIndividualCheck(file)">
    {{ file.file }}
</div>

methods: {
    handleIndividualCheck (item) {
       this.resource = { ...item }
    }
}

当我第一次选择一个项目时，null 属性被转换为一个空字符串，正如解释的那样。下一次，一切都按预期进行

【问题讨论】：

【解决方案1】：

这实际上是 2.19.0 版本的 bootstrap-vue 错误我已经报告了这个问题，修复将在下一个版本中合并。

【讨论】：