VueJS -- Select form input when initial value is null - vuejs2

Question

I have a locker object, with a bunch of fields, and a lots array of objects -- both passed in via props. For the locker object, one of the fields holds the id of a specific lot in the lots array. Like so:
locker: { locker_num: 'AH3', part_of_lot: '235', allocation: '' , etc...}
The lots object, is an array of objects, with the structure of:
lots: [
{ id: '234', sl_num: '567', etc... },
{ id: '235', sl_num: '567', etc... },
{ id: '236', sl_num: '567', etc... },
{ id: '237', sl_num: '567', etc... },
... etc
]
I'm trying to present a form to the user to edit the locker object. For the part_of_lot field, I want to present a select input. Here's my code for that:
<select class='form-control' v-model='locker.part_of_lot.id'>
<option disabled value=''>Choose a Lot</option>
<option v-for='l in lots' :selected="l.id === locker.part_of_lot.id" :value='l.id'>{{ l.sl_num }}</option>
</select>
This works as expected -- but only when there's already a value in the part_of_lot field of locker. When I have a locker that has the part_of_lot field empty, then the above fails. The error is Cannot read property 'id' of null.
So how would I setup that select input to handle both cases: 1) When part_of_lot already has a value and 2) when part_of_lot is null?
EDIT
If I created a method that simply checks if the part_of_lot value is null and, if so, changes it to the string "" then the above code works. But this seems like a clumsy work around. Shouldn't there be a more elegant way to handle this? I feel like there could be many many other fields on other models with a value of null that need to be dealt with in the template.

Answer 1

You could make a computed property partOfLotID with get and set methods referencing the locker.part_of_lot object and handling the case of a null value:
computed: {
partOfLotID: {
get() {
let part = this.locker.part_of_lot;
return (part) ? part.id : '';
},
set(value): {
let part = this.locker.part_of_lot;
if (part && typeof part === 'object') {
this.locker.part_of_lot.id = value;
} else {
this.locker.part_of_lot = { id: value };
}
}
}
}
Then just use partOfLotID in the select instead:
<select class='form-control' v-model='partOfLotID'>
<option disabled value=''>Choose a Lot</option>
<option
v-for='l in lots'
:selected="l.id === partOfLotID"
:value='l.id'
>
{{ l.sl_num }}
</option>
</select>

Answer 2

The solution I've gone with was to have a method that checks the value of part_of_lot and changes it to "" if it is null. Like so:
created () {
this.setToStrings()
},
methods: {
setToStrings () {
// Simply replaces null values with strings=''
if (this.locker.part_of_lot === null) {
this.locker.part_of_lot = ''
}
return this.locker
},

Answer 3

If the part_of_lot is passed in via props, you can set a default value for it:
props: {
part_of_lot: {
type: String,
default: ""
}
}
vuejs props doc
you can also add a new field in data:
{
data: function (){
return {
new_part_of_lot: this.locker.part_of_lot || "";
}
}
}
then use new_part_of_lot instead of part_of_lot.