Avoid converting null to empty string on b-input blur

Question

I'm facing an issue with reactivity in Vue JS 2.6.6. Not sure if it's an issue at all or I'm missing something here.

I'm hydrating an object from MySQL DB through axios getting:

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

The form is handling the properties via v-model: <b-input v-model="resource.alt" />

What I can see is that on blur event, besides no changes were made, the resource.alt property is being changed from null to an empty string ""

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

So what could be the best way to handle this? I don't think that fetching all null fields from DB as empty strings is a nice solution. I mean something like IFNULL(files.alt,'') AS alt

On the other hand, since I fetch a lot of records by doing a loop through them all and setting all null properties to empty string looks very inefficient.

What I need is to keep null properties as null or parse in some way all null properties to empty string from the beginning.

FYI, I'm using vee-validate, so I need to validate if the object has changed with pristine flag which is set to false if the object has been manipulated. This behavior is setting the flag to false because of the change from null to ""

EDIT This is getting odd. The way I propagate the resource to local data in the component is by clicking an element from a list.

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 }
    }
}

The first time I select an item, the null property is converted to an empty string as explained. The next times, everything works as expected

Answer 1

This is in fact a bootstrap-vue bug for version 2.19.0 I've reported the issue and fixes will be merged in the next release.

Link to issue: https://github.com/bootstrap-vue/bootstrap-vue/issues/6078