вызов функции vue из js при изменении

Question

Я пытаюсь сделать вызов из события on. ("Change") в метод vue, и это работает нормально, но я пытаюсь передать полученные данные из события change в переменную Vue, консольный журнал сообщает, что переменная имеет новые данные, но на самом деле она не изменяет правильно, она меняет последнюю переменную при дублировании компонентов.

вот мой код:

Vue.component('text-ceditor',{
props:['id'],
  data: function (){
    return {
      dataText: "this is something for example"
    }
  },
  template: '#text-ceditor',
  methods: {
    setData: function(data){
      console.log(data)
      this.dataText = data
      console.log(this.dataText)
    }
  },
  mounted: function(){
    CKEDITOR.replace(this.$refs.text);
    self = this;
    CKEDITOR.instances.texteditor.on('change', function() { 
      self.setData(this.getData())
    })
  }
})

компонент работает правильно, но переменная просто меняет последнюю

вот скрипка: https://jsfiddle.net/labradors_/3snmcu84/1/

Answer 1

Ваша проблема не с Vue, а с CKEDITOR и его экземплярами (с идентификаторами, которые вы определили в шаблоне, и тем, как вы на них ссылаетесь).

---

Первая проблема заключается в том, что вы дублируете идентификаторы в компоненте text-ceditor:

<textarea ref="text" v-model="dataText" id="texteditor" rows="10" cols="80"></textarea>

Почему мы должны это исправить? Поскольку CKEDITOR экземпляры в Javascript основаны на идентификаторах.

Так что теперь нам нужно изменить атрибут id, чтобы использовать атрибут, переданный в подпрограммах компонента, например:

<textarea ref="text" v-model="dataText" :id="id" rows="10" cols="80"></textarea>

---

Как только мы позаботимся об этом, давайте обратимся к правильному экземпляру CKEDITOR из метода mounted компонента.

Мы хотим сослаться на тот, который совпадает с идентификатором в нашем компоненте.

От:

mounted: function(){
  CKEDITOR.replace(this.$refs.text);
  self = this;
  CKEDITOR.instances.texteditor.on('change', function() { 
    self.setData(this.getData())
  })
}

Кому:

mounted: function () {
  CKEDITOR.replace(this.$refs.text);
  var self = this;
  var myCKEInstance = CKEDITOR.instances[self.id]
  myCKEInstance.on('change', function () {
    self.dataText = myCKEInstance.getData()
  })
}

Обратите внимание, что я также удалил вызов setData, так как нет необходимости его иметь, а также объявил self как переменную, избегающую глобальной области видимости (которая будет перезаписывать его каждый раз и ссылаться на последнюю в все разные компоненты).

---

Теперь все обновляется правильно, вот рабочий JSFiddle .