在 data 函数中访问 Vue 属性答案

【问题标题】：Accessing Vue properties inside of the data function在 data 函数中访问 Vue 属性
【发布时间】：2018-09-15 16:49:12
【问题描述】：

我在个人项目中使用 Vue 来了解更多关于 Vue 和 JS 的信息。它将是一个支持网络的降价编辑器。我正在使用 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 编辑器的内容更新现在隐藏的textarea 的内容。

到目前为止一切都很好，但由于这是以编程方式发生的（而不是直接在文本编辑器中输入）vue 不会更新其内部模型以反映降价编辑器中的内容。

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

我认为发生了一些事情，数据函数内的注释范围不可访问（关闭不应该意味着它是吗？）。有没有其他方法可以访问note？

任何帮助将不胜感激。蒂亚！

编辑：这是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>

【问题讨论】：

你能在codesandbox.io分享你的代码吗？
您好，感谢收看！我现在要睡觉了，但明天我会起床的。
好的，我的兄弟，晚安
嗨，编辑添加代码框
如果库在进行编程更改时没有生成适当的事件，Vue 将不会检测到它们，这似乎是您发现的。但是，查看文档，似乎该库确实是trigger it's own events。除了使用forceSync，您可以在组件中监听这些事件并适当地更新注释。

标签： vuejs2

【解决方案1】：

我不完全确定为什么会这样，但我认为我访问了错误的“注释”。所以我删除了本地注释变量并在数据函数中硬编码了一个初始值：

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

然后在出现note 的任何地方都使用this.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>

【讨论】：