Vue.js 在选择字段中预选第一个元素？答案

【问题标题】：Vue.js preselect first element in select field?Vue.js 在选择字段中预选第一个元素？
【发布时间】：2017-05-22 07:27:01
【问题描述】：

我正在使用 museUI 进行选择输入。当我尝试将下拉列表中的第一项设置为默认项时，我无法使其正常工作。如何预先选择填充 v-for 的数组上的第一项：

这是我的模板的外观：

  <mu-select-field v-model="selectModel">
    <mu-menu-item v-for="text,index in dropdown"  :key="index" :value="index" :title="text"/>
  </mu-select-field>

还有我的脚本：

  export default Vue.component('st-filter', {
    data () {
      return {
        selectModel: "",
        dropdown : [],
      }
    },
    methods: {
      populateDates: function () {
        let date7daysAgo, date1monthAgo...
        this.dropdown = [`Last week (${date7daysAgo} - ${dateToday})`, `Last month (${date7daysAgo} - ${date1monthAgo})` ];
        this.selectModel = this.dropdown[0];

      }
    },
    created() {
      this.populateDates();
    }
  });

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

好的，在这里找到解决方案：http://www.muse-ui.org/#/selectField

只需将 selected 分配给 0 并删除 populateDates 方法中的分配，例如：

  export default Vue.component('st-filter', {
    data () {
      return {
        selectModel: 0, //<=== Assign = 0
        dropdown : [],
      }
    },
    methods: {
      populateDates: function () {
        let date7daysAgo, date1monthAgo...
        this.dropdown = [`Last week (${date7daysAgo} - ${dateToday})`, `Last month (${date7daysAgo} - ${date1monthAgo})` ];
        // ERASE this: ====> this.selectModel = this.dropdown[0];

      }
    },

【讨论】：