Ошибка Vue с библиотекой Rangy: «...» не является функцией (но только внутри хуков) - PullRequest
Новая
       36

Ошибка Vue с библиотекой Rangy: «...» не является функцией (но только внутри хуков)

0 голосов
/ 06 мая 2019

Для компонента Vue я использую библиотеку Rangy , чтобы выделить отдельные слова внутри текста.Это работает нормально, если Rangy вызывается из любого метода внутри methods объекта: 

let applier = rangy.createClassApplier('some-class');
applier.toggleRange(range);

Но иногда мне нужно восстановить определенное состояние при загрузке страницы, поэтому я пытался использовать тот же метод внутри created и mounted крючки.Это не работает.

Прямо сейчас, первые строки скрипта в моем компоненте выглядят так: 

import _ from 'lodash';
import rangy from 'rangy';
import 'rangy/lib/rangy-classapplier';

export default {

    mounted: function() {
        // Leave function if there is no data in DB to be restored
        if (_.isEmpty(this.mostRecentAnswers))
            return;

        else {
            // ERROR
            let applier = rangy.createClassApplier('some-class');
            // ...
        }
    }
    // ...
}

Сообщение об ошибке: TypeError: rangy__WEBPACK_IMPORTED_MODULE_2___default.a.createClassApplier is not a function at VueComponent.mounted

Я использую Vue с Laravel и Laravel Mix (который является оберткой для Webpack).

Что не так с моим кодом?Обратите внимание, что я также импортирую Lodash и использую его в хуке без ошибок.

Ответы [ 2 ]

1 голос
/ 06 мая 2019

Я бы порекомендовал сделать из этого плагин Vue, чтобы было проще: 

// plugins/vue-rangy.js

import rangy from 'rangy'

const VueRangy = {
  install (Vue, options) {
      if (options.hasOwnProperty('init') && options.init) {
        rangy.init()
      }

      Vue.prototype.$rangy = rangy
  }
}

export default VueRangy

Затем используйте его как любой другой плагин: 

import VueRangy from 'plugins/vue-rangy'

Vue.use(VueRangy, {
  init: true
})

Тогда просто используйте this.$rangy в ваших компонентах.

1 голос
/ 06 мая 2019

Мне пришлось использовать rangy.init(), который инициализирует Rangy, если он еще не был инициализирован: https://github.com/timdown/rangy/wiki/Rangy-Object#rangyinit

...