如果使用了preventdefault,如何使vue查看输入元素中的更改?

下面是一个非常简单的例子。我不想在按Enter键时在文本区域中创建新行。这就是我调用的原因 preventDefault 在我的处理器里。我还修改了文本区域内的值。问题是因为我使用了 防止违约 . 如何阻止Enter键入换行符并使Vue查看文本区域中的更改?

注意,我用过 el.value (更新元素)而不是 this.value (Vue模型),因为我希望光标保持在同一位置。如果我更新一个模型数据,在渲染视图后光标将被重置到末尾,我不能那么容易地修复它的位置。

我需要一个黑客 $nextTick 要固定光标位置:

this.$nextTick(() => {
      el.setSelectionRange(cursorPos, cursorPos);
    })

所以我不想让事情复杂化,也不想触摸 模型 并使视图重新呈现。为什么?我只想让Vue注意到输入值的变化。我觉得我需要手动发出一些事件(触发我的文本区域的输入事件,但如何触发?)

new Vue({
  el: '#app',
  data: {
    value: 'Hello.World'
  },

  methods: {
    fixGreeting(evt) {
      evt.preventDefault();

      let el = evt.target;
      let cursorPos = el.selectionStart;
      el.value = el.value.replace('.', ' ');
      el.setSelectionRange(cursorPos, cursorPos);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <textarea v-on:keydown.enter="fixGreeting" v-model="value"></textarea> Model: {{ value }}
</div>