Доступ к свойствам Vue внутри функции данных

Question

Я использую Vue в личном проекте, чтобы узнать больше о Vue и JS.Это будет редактор уценок, который создает резервные копии в Интернете.Я использую Vue 2 / Webpack.Для редактора уценок я использую SimpleMDE .

Я создал проект на основе этого поста .Проект является корневым экземпляром Vue с одним пользовательским компонентом.Пользовательский компонент содержит редактор.Шаблон выглядит следующим образом:

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

SimpleMDE ищет экземпляр textarea и преобразует его в редактор уценки следующим образом:

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

А преобразование означает, что код SimpleMDE скрываеттекстовая область и добавляет в кучу других HTML.Таким образом, текстовая область все еще находится в DOM, просто скрыта от глаз.forceSync: true выше говорит редактору обновить содержимое скрытой теперь текстовой области содержимым редактора уценок.

Пока все хорошо, но это происходит программно (вместо того, чтобы кто-то печатал прямо в текстовом редакторе).) vue не будет обновлять свою внутреннюю модель, чтобы отразить то, что находится в редакторе уценки.

Я пробовал кучу разных вещей, таких как вычисленные значения и наблюдатели, но, похоже, ничего не работает.Я решил, что самая простая вещь для меня - это использовать setInterval и опросить изменения.Там нет ошибок.И функция setInverval вызывается, но note не обновляется (согласно инструментам Vue dev на chrome).Но это все еще не работает.И я понятия не имею, почему.

Я думаю, что происходит что-то, где область действия заметки внутри функции данных недоступна (разве закрытие не означает, что это так?).Есть ли другой способ доступа к note?

Любая помощь будет принята с благодарностью.TIA!

Редактировать: Вот codesandbox (но инструменты vue dev не работают, я сделал что-то не так?)

Вот мой код компонентов:

 <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, я использовал привязку для обработчика изменений

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>