为什么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)
}