Question

Vue.js 2.5动态下拉列表

以下硬编码的下拉列表有效。

<ul class="dropdown-menu" role="menu" id="dropdown">
  <li><a href="#" v-on:click="setDate('2018-11-11')">2018-11-11</a></li>
  <li><a href="#" v-on:click="setDate('2018-11-12')">2018-11-12</a></li>
</ul>

但是我需要动态显示日期，因此我将<li>注入了<ul>。

<ul class="dropdown-menu" role="menu" id="dropdown" v-html="dropDown"></ul>

createDates: function(){
    var dates = '';
    var date = ''
    var d = '';
    for(var i = 0; i < num_days; i++){
        date = today.getDate() - i;
        d = today.getFullYear() + '-' + today.getMonth() + '-' + date;
        dates += '<li><a href="#" v-on:click="setDate(\'' +  d + '\');">' + d + '</a></li>';
    }
    this.dropDown = dates;
}

单击v-on:click时不会触发问题li。我怀疑 DOM 在注入<li>时已经呈现并注册了所有事件，而没有将其注册为事件。我没有在 Vue.js 中找到任何动态下拉列表的示例。

Answer 1

创建一个名为computed的{{1}}属性，并在模板中循环访问它，如下所示：

dates

模板：

 computed(){

    createdDates: function(){
     var dates = [];
     var date = ''
    var d = '';
    for(var i = 0; i < this.num_days; i++){
    date = today.getDate() - i;
    d = this.today.getFullYear() + '-' + this.today.getMonth() + '-' + date;
     dates.push(d);
      }
         return  dates;
  }
       }

完整示例

     <ul class="dropdown-menu" role="menu" id="dropdown">
         <li v-for="d in createdDates"><a href="#" v-on:click.prevent="setDate(d)">{{d}}</a></li>
    </ul>

new Vue({
  el: '#app',
  data: {
    today: new Date(),
    num_days: 10

  },
  methods: {
    setDate(d) {
      console.log(d)
    }
  },
  computed: {
    createdDates: function() {
      var dates = [];
      var date = ''
      var d = '';
      for (var i = 0; i < this.num_days; i++) {
        date = this.today.getDate() - i;
        d = this.today.getFullYear() + '-' + this.today.getMonth() + '-' + date;
        dates.push(d);
      }
      return dates;
    }

  }

})

Vue 2.5动态下拉点击失败

1 个答案: