Перевод директивы Vue 1x на Vue 2 - PullRequest
Новая
       15

Перевод директивы Vue 1x на Vue 2

0 голосов
/ 02 апреля 2020

Я пытаюсь перевести устаревший проект Vue в Vue 2. В этом проекте находится серия файлов. js в папке «директив». Вот пример файла iconradio. js

module.exports = {
  twoWay: true,
  bind: function() {
      var self = this;
      var btns = $(self.el).find('.btn');

      btns.each(function() {
          let initValue = $(this).find('input').get(0).value;
          if (initValue === '') {
              $(this).addClass('active');
          }
          $(this).on('click', function() {
              self.set(initValue);
          })
      });
  },
  update: function() {
      var value = this._watcher.value;
      if (value) {
          this.set(value);

          var btns = $(this.el).find('.btn')
          btns.each(function() {
              $(this).removeClass('active');
              $(this).removeClass('bg-purple');
              var v = $(this).find('input').get(0).value;
              if (v === value) {
                  $(this).addClass('active');
                  $(this).addClass('bg-purple');
              }
          });
      } else {
          var input = $(this.el).find('.active input').get(0);
          if (input) {
              this.set(input.value);
          }
      }
  }
}

В компоненте Vue директива используется следующим образом: 

<div class="btn-group btn-group-xs" role="group" aria-label="typeFiltersLabel" data-toggle="buttons" v-iconradio="items_filter_storytype">
  <template v-for="item in storyTypeIcons">
     <label class="btn btn-default" data-toggle="tooltip" data-placement="top" :title="item.name"><input type="radio" autocomplete="off" :value="item.shortname" /><span class="item-type-icon-shrt" :class="typeIcon(item.shortname)"></span></label>
  </template>
</div>

Когда компонент загружается, я встретился с этой ошибкой:

[Vue warn]: ошибка в ловушке обновления iconradio директивы: "Ошибка ввода: this._watcher не определена"

Я надеялся, что возможно это было просто вопросом изменения 

module.exports

на 

export default {}

Но тогда это приводит к ошибке

[Vue warn]: Ошибка в директива iconradio bind hook: «Ошибка типа: self не определено»

...