Поле выбора VueJS не реагирует при динамическом заполнении

#javascript #vue.js

#JavaScript #vue.js

Вопрос:

Мне нужно установить для поля выбора статуса значение customer.lStatus . Однако поле выбора не обновляется значением, если я заранее не напишу HTML вручную. Что?

Скрипт

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

Не работает

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

Работает

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

Ответ №1:

В атрибуте отсутствует двоеточие value .

Попробуйте:

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