编程语言
首页 > 编程语言> > javascript-动态填充时,VueJS选择框不起作用

javascript-动态填充时,VueJS选择框不起作用

作者:互联网

我需要将状态选择框设置为customer.lStatus的值.然而,
选择框不会用值更新,除非我手动编写
事先使用HTML. ha?

脚本

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

解决方法:

您在value属性中缺少一个冒号.

尝试:

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

标签:vue-js,javascript
来源: https://codeday.me/bug/20191118/2025509.html