如何用watch来监听输入框的值是否变化，没有变化的时，点确定的时候提示

Question

何用watch来监听输入框的值是否变化，没有变化的时，点确定的时候提示

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你可以使用 Vue 的 watch 选项来监听输入框的值是否变化，然后在没有变化的情况下，点确定的时候提示。

以下是一个简单的示例：

<template>
  <div>
    <input v-model="inputValue" />
    <button @click="handleClick">确定</button>
    <p v-if="!inputValueChanged">输入框值没有变化</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      inputValueChanged: true
    }
  },
  watch: {
    inputValue(newVal, oldVal) {
      if (newVal === oldVal) {
        this.inputValueChanged = false
      } else {
        this.inputValueChanged = true
      }
    }
  },
  methods: {
    handleClick() {
      if (!this.inputValueChanged) {
        alert('输入框值没有变化')
      }
    }
  }
}
</script>

在上面的示例中，我们使用 watch 选项来监听 inputValue 的变化，如果输入框的值没有变化，我们将 inputValueChanged 的值设置为 false，否则设置为 true。然后，在 handleClick 方法中，我们检查 inputValueChanged 的值，如果为 false，则提示输入框值没有变化。

说明

在上面的示例中，我们使用 watch 选项来监听 inputValue 的变化，这样可以实时地检测输入框的值是否变化。但是，如果你想要在用户点击确定按钮之前检测输入框的值是否变化，可以使用 beforeUpdate 或 updated lifecycle hook 来实现。