我怎样才能使@blur事件正常工作-Nuxtjs

Question

我正在尝试触发一个函数，该函数在使用 nuxtjs 失去焦点时验证输入字段。当我将焦点移出输入字段时，该功能不会被触发，但当我聚焦并开始在另一个或同一个输入字段中输入时会被触发。

<div class="control">
  <input class="input" type="text" ref="email" @blur="validateMail()" v-model="email_p" name="email" />
</div>

这是函数调用

 methods: {
        validateMail(){
            let value = this.$refs.email.value
            let mailformat = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

            if (value.match(mailformat)) {
                //validation passed
            } else {
                this.msg.email = 'Enter a valid email';
            }
        },
}

Answer 1

您可以将值传递给您的方法或检查 this.email_p:

而不是 ref

new Vue({
  el: '#demo',
  data() {
    return {
      email_p: "test@test.com",
      other: ""
    }
  },
  methods: {
    validateMail(val){
      let value = val
      // or without passing value
      // let value = this.email_p
      let mailformat = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (value.match(mailformat)) {
          //validation passed
          console.log("passed")
      } else {
          console.log('Enter a valid email');
      }
  },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="control">
    <input class="input" type="email" @blur="validateMail(email_p)" v-model="email_p" name="email"/>
    <input class="input" type="text" v-model="other" />
  </div>
</div>

Answer 2

这可能没问题

<template>
  <div class="control">
    <input
      ref="email"
      v-model="email_p"
      class="input"
      type="text"
      name="email"
      @blur="validateMail"
    />
    message: {{ msg.email }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      email_p: '',
      msg: {
        email: '',
      },
    }
  },
  methods: {
    validateMail(value) {
      const mailformat =
        /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

      if (value.target.value.match(mailformat)) {
        // validation passed
      } else {
        this.msg.email = 'Enter a valid email'
      }
    },
  },
}
</script>

您不需要使用$refs访问元素，您可以直接访问事件。
如果您想通过 $refs 获取 value，则需要等待完整的 tick to trigger，才能获取实际的新值。因此使用 @blur 传递的 event，更简单、更干净、更整洁。

此外，value.target.value 很重要，因为它正在接收事件而不是 HTML 元素本身。

PS：事件也可以写成@blur="validateMail($event)"如果你想更明确但它不是强制性的（它已经自己传递了）。

我怎样才能使@blur事件正常工作-Nuxtjs

how can i to make @blur event work properly - Nuxtjs

javascript

events

blur

vue.js

nuxt.js