Question

我在Vue中有一个带输入字段的页面。当有人更改该组件中的任何输入字段时，我想显示一条消息。我已经习惯了Angular，你可以使用isDirty函数，但是Vue没有。

有没有办法在Vue视图中捕获所有keyup事件？所以我可以捕获它并将变量设置为true以显示消息？

现在我已将此添加到所有输入模型中： <input v-model="foo" @change="someThingChanged()">

Answer 1

有没有办法在Vue视图中捕获所有keyup事件？

您可以在父容器上绑定单个onchange事件，并从更改事件冒泡的事实中受益：

<div class="container" @change="someThingChanged()">
  <input v-model="foo">
  <input v-model="bar">
  ... etc.
</div>

Answer 2

我在Vue方面经验不足，但是watch在这里似乎更可取。

 watch: {
 item: {
    handler(val){
      // do stuff
    },
    deep: true
  }
}

Answer 3

与其监视DOM中的键或更改事件，不如观察已经处于组件状态的foo会更好。在这种情况下，我使用了基于foo的计算函数：

const app = new Vue({
  el: '#vue-wrapper',
  data: {
    foo: '',
  },
  computed: {
    showMessage() {
      return (!!this.foo) // <-- your logic here
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue-wrapper">
  Foo: <input v-model="foo">
  <div v-if="showMessage">This will be shown if foo is not empty</div>
</div>

Answer 4

除了检查是否脏，我们还可以使用组件导航防护来防止用户在表单脏的情况下导航到其他地方。 BeforerouteLeave Vue Component route gaurd。

...
data: {
  formDirty: false, 
}
methods: {
  somethingchanged() {
    formDirty = true,
  }
}
beforeRouteLeave (to, from, next) {
 if(formDirty){
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
   next(false)
  }
 }
}
...

Vue Dirty state trigering in component

4 个答案: