Laravel6とVueで定義した関数が呼べない

Question

https://jp.vuejs.org/v2/cookbook/form-validation.html

このサイトのemailValidを実装したいと思っています。

サイトに沿ってやっているつもりなんですけど、validEmailが見つけれないよ〜って言われてしまいます。

Error in v-on handler: "ReferenceError: validEmail is not defined"

methods: {

    checkForm: function(e) {
      this.errors = [];
      console.log(e)
      if(!this.name){
        this.errors.push("名前は必須です");
      }
      if(!this.email){
        this.errors.push("メールアドレスは必須です")
      } else if(!validEmail(this.email)){   　　　　　　ここで呼び出したい！！！
        thia.errors.push("正しいメールアドレスを使用してください");
      }
      if(!this.subjectId){
        this.errors.push("用件を入力してください");
      }
      if(!this.text){
        this.errors.push("お問い合わせの内容を入力してください");
      }
      e.preventDefault();
    },

    validEmail: function(email) {　　　　ここで定義出来てる予定！！
      var re = /\A[a-zA-Z0-9.!\#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\z/
      return re.test(email)
    },
}

この記述の以外の部分に原因があるのでしょうか？

どなたか知恵を貸していただきたいです。

よろしくお願いします。

php 7.4
laravel 6.0
vue@2.6.11

Answer 1

validEmail の前に this が足りていません。

validEmail は vue インスタンスのメソッドとして定義されているので、
this.validEmail とする必要があります。

尚、この問題が解決しても、次の行、

thia.errors.push("正しいメールアドレスを使用してください");

の this → thia の typo によってふたたびエラーになるかと思います。

Comments

[tenlife]

ありがとうございます。勉強になりました。