Infinite loop warning in vue.js

Question

This vue directive:

Vue.directive 'datepicker',
  bind: () ->
    vm = this.vm
    key = this.expression
    datepicker = $(this.el).datepicker
      todayBtn: 'linked'
      language: 'de'
      daysOfWeekDisabled: '0'
      calendarWeeks: true
      todayHighlight: true
      toggleActive: true
      autoclose: true
    datepicker.on 'changeDate', (e) ->
      vm.$set key, e.date
  update: (val) ->
    $(this.el).datepicker 'setDate', val

gives me this warning in the console:

You may have an infinite update loop for watcher with expression: date

for the line

vm.$set key, e.date

How can I get rid of the warning / infinite loop?

Try removing that line and the one above that – gurghet Aug 23 '16 at 12:42 — gurghet, Aug 23 '16 at 12:42

score 1 · Accepted Answer · answered Aug 23 '16 at 14:55

You can add a guard on your changeDate handler to update vm only when the date is really different than the one already stored. Please note that identity check may not be enough as $datepicker (depending on its internal implementation) can dispatch changeDate event with a copy of date.

Infinite loop warning in vue.js

1 Answers1