在更改时从 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。

在更改时从 js 调用 vue 函数

calling vue function from js on change

javascript

components

ckeditor

vue.js

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