Javascript 更改时从js调用vue函数

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

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

---

这里有一个问题：

您的问题不在于

Vue

，而在于

CKEDITOR

及其实例（在模板中定义的ID以及引用它们的方式）

---

第一个问题是您在

text-ceditor

组件中复制ID：

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

---

一旦我们解决了这个问题，让我们从组件中的

mounted

方法中引用正确的

CKEDITOR

实例

我们希望引用与组件中的id匹配的组件。

发件人：

致：

请注意，我还删除了对

setData

的调用，因为不需要它，并且还将

self

声明为一个变量，以避免全局范围（这将每次覆盖它，并在所有不同组件中引用最新的一个）

---

---

现在所有的东西都在正确更新。你能准确地扩展你试图隔离的bug吗？当你尝试在第一个或任何组件中写入时，只有最后一个得到了更改，应该单独处理

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

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()
  })
}