javascript - 在更改时从 js 调用 vue 函数

Question

我正在尝试从 on.("change") 事件调用 vue 方法并且工作正常但是尝试将从更改事件接收到的数据提供给 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())
    })
  }
})

组件工作正常，但变量只是改变了最后一个

这是 fiddle :https://jsfiddle.net/labradors_/3snmcu84/1/

Answer 1

您的问题不在于 Vue，而在于 CKEDITOR 及其实例(您在模板中定义的 ID 以及您引用它们的方式)。

---

第一个问题是您在 text-ceditor 组件中复制了 id:

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

为什么我们需要解决这个问题？因为 Javascript 中的 CKEDITOR 实例是基于 id 的。

所以现在我们需要更改 id 属性以使用在组件的 props 中传递的属性，如下所示:

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

---

一旦我们解决了这个问题，让我们从组件的 mounted 方法中引用正确的 CKEDITOR 实例。

我们想引用与我们组件中的 id 匹配的那个。

来自:

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 声明为避免全局范围的变量(这每次都会覆盖它并在所有不同的组件中引用最新的一个)。

---

现在一切都在正确更新，here's the working JSFiddle .