为什么Vue官方示例'markdown'在.vue文件中不起作用？

Question

我正在使用ES6并将vue官方markdown示例迁移到.vue文件，但它不会更新this.input计算方法中的compiledMarkdown值？

结果和.vue代码在这里：

<template>
  <div>
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import _ from 'lodash';
import marked from 'marked';

export default {
  data() {
    return {
      input: '# hello'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce((e) => {
      this.input = e.target.value;
    }, 300)
  }
};
</script>

<style scoped>
   ...
</style>

我知道计算属性可以绑定数据vaule并自动更新，但为什么不在这里呢？

Answer 1

你不应该在这里使用箭头功能：

methods: {
  update: _.debounce((e) => {
    this.input = e.target.value;
  }, 300)
}

这会将this绑定到错误的上下文 - 您正在编写的模块文件的上下文，而不是从它创建的组件实例。改为使用普通功能。

methods: {
  update: _.debounce(function(e) {
    this.input = e.target.value;
  }, 300)
}