CODEWITHSUNDEEP
javascriptvue.js
Donnie
Donnie

Reputation: 6351

VueJS Select Box Not Reacting When Dynamically Populated

I need to set the status select box to the value of customer.lStatus. However, the select box does not get updated with a value, unless I manually write the HTML beforehand. Wha?

Script

<script>
// ...
data () {
  return {
    customer: {
      dLastUpdate: '2016-02-17 15:07:06',
      lKey: '1007',
      lLastUpdateBy: '1000',
      lStatus: '100015',
      sName: 'TestAgain'
    },
    statuses: [
      [100013, 'Active'],
      [100015, 'Deactivated'],
      [100012, 'On Hold'],
      [100014, 'On Notice'],
      [100011, 'Pending']
    ]
  };
},
// ...
</script>

Does not work

<select class="form-control" v-model="customer.lStatus">
  <option v-for="status in statuses" value="status[0]">{{status[1]}}</option>
</select>

Works

<select class="form-control" v-model="customer.lStatus">
  <option value="100013">Active</option>
  <option value="100015">Deactivated</option>
  <option value="100012">On Hold</option>
  <option value="100014">On Notice</option>
  <option value="100011">Pending</option>
</select>

Upvotes: 3

Views: 207

Answers (1)

flipjms
flipjms

Reputation: 792

You are missing a colon in the value attribute.

Try:

<select class="form-control" v-model="customer.lStatus">
  <option v-for="status in statuses" :value="status[0]">{{status[1]}}</option>
</select>

Upvotes: 3

Related Questions