时间戳

首页 > 解决方案 > Vue 2.5 动态下拉点击失败

javascript - Vue 2.5 动态下拉点击失败

问题描述

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>s 注入<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我怀疑当s 被注入并且没有注册为事件时， DOM已经渲染并注册了所有事件。我在Vue.js<li>中没有找到任何动态下拉列表的示例。

标签： javascriptvue.jstwitter-bootstrap-3vuejs2vue-component

解决方案

在模板中创建一个computed名为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;
    }

  }

})
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

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

推荐阅读