[Vuejs]-Datepicker not working for new record added to the table

by

0👍

✅

First, I have to say mix JQuery and Vue is really not one good idea.

The issue:

Vue is based on Virtual Dom, so you’d better to initialze each DatePick Dom element with $('.datepicker').datepicker() once Vue re-render.

In your codes, when add holidays, Vue creates one new input, but new input doesn’t apply .datepicker().

One quick solution based on Vue LifeCycle, you need to hook updated/mounted to make sure all new input.datepicker are initialized with .datepicker(). (if you remove the function=updated, you will see the issue same as yours)

You can check How to use a jQuery plugin inside Vue or google it, you will find some more.

PS: sorry for my bad english… 🙁

$('.datepicker').datepicker()
var vm = new Vue({
    el: '#holiday-vue',
    data: {
      holidays:  {
        LocalHolidays: [{Date:'2017/01/01',Name:'A'}, {Date:'2018/01/01',Name:'B'}],
        DefaultHolidayViewModel: {Date:'2019/01/01',Name:'None'}
      },
      tableHeader: 'Local Holidays',
      holidayWarning: true,
      dateWarning: true
    },
    mounted: function() {
      $('.datepicker').datepicker()
    },
    updated: function () {
      $('.datepicker').datepicker('remove')
      $('.datepicker').datepicker()
    },    
    methods: {
      addHoliday: function () {
        this.holidays.LocalHolidays.push(this.holidays.DefaultHolidayViewModel);
        
      }
    }
 });
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<div id="holiday-vue">
  <div class="form-group form-group-sm">
    <table id="tableID">
      <thead>
        <tr>
          <th>Holiday</th>
          <th>Date</th>
        </tr>
      </thead>

      <tbody v-for="h in holidays.LocalHolidays">
        <tr>
          <td class="col-sm-3">
            <input type="text" placeholder="Holiday Name" required="required" v-model="h.Name" />
          </td>
          <td class="col-sm-3">
            <input type="text" placeholder="yyyy/mm/dd" required="required" class="form-control datepicker" data-date-format="yyyy/mm/dd" v-model="h.Date" />
          </td>
        </tr>
      </tbody>
    </table>
    <div>&nbsp;<span v-on:click="addHoliday()"><a href="#"><i class="fa fa-plus"></i> Add Holiday</a></span></div>
  </div>
</div>

Leave a comment