Vue 更改事件未触发

介绍

在 Vue 中，我们可以使用 v-model 来实现双向数据绑定。当我们在输入框中输入内容时，会自动更新对应的数据。但有时我们会遇到一个问题——当我们手动修改数据时，数据并不会被更新到视图中。

解决方法

出现此问题的原因是，当我们使用 v-model 绑定数据时，在输入框中输入内容时会触发 input 事件，而手动修改数据并不会触发此事件。解决方法就是手动触发 input 事件。

使用 $nextTick

$nextTick 方法可以在 DOM 更新之后执行回调函数，因此我们可以在回调函数中手动触发 input 事件。

this.$nextTick(() => {
  const event = new Event('input')
  this.$refs.input.dispatchEvent(event)
})

代码中，我们使用 $refs 获取到输入框的引用，然后使用 dispatchEvent 方法手动触发 input 事件。

手动绑定事件

另一个解决方法是不使用 v-model，手动绑定 input 事件和数据更新方法。这样无论是手动修改数据还是在输入框中输入内容，都会触发 input 事件。

<template>
  <input
    ref="input"
    :value="value"
    @input="onInputChange"
  >
</template>
<script>
export default {
  data() {
    return {
      value: '',
    }
  },
  methods: {
    onInputChange(event) {
      this.value = event.target.value
    },
  },
}
</script>

代码中，我们手动绑定了 input 事件，并在事件回调函数中更新数据。这样无论是手动修改数据还是在输入框中输入内容，都会触发 input 事件，从而更新数据。

总结

在使用 v-model 绑定数据时，手动修改数据可能不会触发 input 事件，导致数据未更新到视图中。我们可以使用 $nextTick 手动触发 input 事件或手动绑定 input 事件来解决这个问题。