【问题标题】：calling vue function from js on change在更改时从 js 调用 vue 函数
【发布时间】：2019-02-14 07:53:29
【问题描述】：

我正在尝试从 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())
    })
  }
})

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

这里是小提琴：https://jsfiddle.net/labradors_/3snmcu84/1/

【问题讨论】：

您能否详细介绍您要隔离的错误？
当你尝试写入第一个或任何组件时，只有最后一个得到更改，应该单独处理

标签： javascript vue.js ckeditor components

【解决方案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。

【讨论】：