Question

我在个人项目上使用Vue，以了解有关Vue和JS的更多信息。这将是一个备份到网络的markdown编辑器。我正在使用Vue 2 / Webpack。对于降价编辑器，我使用的是SimpleMDE。

我根据this post搭建了该项目。该项目是具有单个自定义组件的根Vue实例。定制组件包含编辑器。模板如下所示：

<template>
  <div>
    <textarea
      id="noteEditor"
      v-model="note"
    />
  </div>
</template>

SimpleMDE查找textarea实例，并将其转换为markdown编辑器，如下所示：

editor = new SimpleMDE({
    element: document.getElementById('noteEditor'),
    contents: note,
    forceSync: true
  })

通过转换，我的意思是SimpleMDE代码隐藏了文本区域并添加了许多其他HTML。因此，文本区域仍在DOM中，只是不可见。上面的forceSync: true告诉编辑器使用markdown编辑器的内容更新现在隐藏的文本区域的内容。

到目前为止还不错，但是由于这是通过编程实现的（而不是有人直接在文本编辑器中键入），因此vue不会更新其内部模型以反映markdown编辑器中的内容。

我尝试了很多类似computed values和观察者的方法，但是似乎没有任何效果。我认为最简单的尝试是使用setInterval并轮询更改。没有错误。并且setInverval函数被调用，但是note没有得到更新（根据chrome上的Vue开发工具）。但是它仍然无法正常工作。而且我不知道为什么。

我认为在某种情况下，无法访问数据函数中注释的范围（闭包不应该是吗？）。还有其他访问note的方法吗？

任何帮助将不胜感激。 TIA！

编辑：这里是codesandbox（但是vue开发工具不起作用，我做错了吗？）

这是我的组件代码：

 <template>
  <div>
    <textarea
      id="noteEditor"
      v-model="note"
    />
  </div>
</template>

<script>
import SimpleMDE from 'simplemde'

var editor
var note = 'i will need to be fixed, when loading from a real source'

export default {
  data () {
    return {
      note: note
    }
  },
  mounted () {
    if (!editor) {
      /* eslint-disable-next-line no-debugger */
      // debugger
      editor = new SimpleMDE({
        element: document.getElementById('noteEditor'),
        contents: note,
        forceSync: true
      })
    }
    setInterval(function () {
      if (note !== editor.value()) {
        note = editor.value()
      }
    }, 1000)    
  }
}
</script>

<style lang="stylus" scpoed>
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css'
@import 'https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css'
</style>

Answer 1

我不太确定为什么这样做，但是我认为我访问了错误的“注释”。因此，我删除了本地笔记变量，并在数据函数中对初始值进行了硬编码：

data: function () {
  return {
    note: 'test'
  }
}

，然后在发生this.note的每个地方都使用note而不是note。最后，为了获得正确的this，我将bind用于更改处理程序

editor.codemirror.on('change', this.changeNote.bind(this))

下面是完整代码。谢谢大家阅读！

 <template>
  <div>
    <textarea
      id="noteEditor"
      v-model="note"
    />
  </div>
</template>

<script>
import SimpleMDE from 'simplemde'

var editor

export default {
  data: function () {
    return {
      note: 'test'
    }
  },
  mounted () {
    if (!editor) {
      /* eslint-disable-next-line no-debugger */
      // debugger
      editor = new SimpleMDE({
        element: document.getElementById('noteEditor'),
        contents: this.note
      })
    }
    editor.codemirror.on('change', this.changeNote.bind(this))
  },
  methods: {
    changeNote () {
      this.note = editor.value()
    }
  }
}
</script>

<style lang="stylus" scpoed>
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css'
@import 'https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css'
</style>

访问data函数内部的Vue属性

1 个答案: