title: VueJS -- Select form input when initial value is null
body: <p>I have a <code>locker</code> object, with a bunch of fields, and a <code>lots</code> array of objects -- both passed in via <code>props</code>. For the <em>locker</em> object, one of the fields holds the <code>id</code> of a specific <code>lot</code> in the <code>lots</code> array. Like so:</p>
  
  <pre><code>locker: { locker_num: 'AH3', part_of_lot: '235', allocation: '' , etc...}
  </code></pre>
  
  <p>The <code>lots</code> object, is an array of objects, with the structure of:</p>
  
  <pre><code>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
  ]
  </code></pre>
  
  <p>I'm trying to present a form to the user to edit the <code>locker</code> object. For the <code>part_of_lot</code> field, I want to present a <code>select</code> input. Here's my code for that:</p>
  
  <pre><code>    &lt;select class='form-control' v-model='locker.part_of_lot.id'&gt;
        &lt;option disabled value=''&gt;Choose a Lot&lt;/option&gt;
        &lt;option v-for='l in lots' :selected="l.id === locker.part_of_lot.id" :value='l.id'&gt;{{ l.sl_num }}&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>This works as expected -- but only when there's already a value in the <code>part_of_lot</code> field of <code>locker</code>. When I have a <code>locker</code> that has the <code>part_of_lot</code> field empty, then the above fails. The error is <code>Cannot read property 'id' of null</code>.</p>
  
  <p>So how would I setup that <code>select</code> input to handle both cases: 1) When <code>part_of_lot</code> already has a value and 2) when <code>part_of_lot</code> is null? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If I created a method that simply checks if the <code>part_of_lot</code> value is <code>null</code> and, if so, changes it to the string <code>""</code> 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 <em>many</em> other fields on other models with a value of <code>null</code> that need to be dealt with in the template. </p>