Vue 2.5 динамические выпадающие щелчки не работают - PullRequest
Новая
       6

Vue 2.5 динамические выпадающие щелчки не работают

0 голосов
/ 12 ноября 2018

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. Я подозреваю, что DOM уже отрисовал и зарегистрировал все события, когда <li> вводятся и не регистрируются как события. Я не нашел примеров динамического выпадающего меню в Vue.js .

1 Ответ

0 голосов
/ 12 ноября 2018

создайте свойство 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...