2

私は次のことをしようとしています:

次のように Vuex ストアからトークンを渡したいと思います。

<template>
  ...
  <div class="col-md-12">
    <label for="email" class="label-input">E-mail address</label>
    <input v-validate="validations.user.email" v-model="data.user.email" id="email" class="form-control" type="email" name="email" placeholder="Enter e-mail" />
    <div v-show="errors.has('email')" id="email-error" class="msg-error text-danger">{{ errors.first('email') }}</div>
  </div>
  ...
</template>

<script>
  ...
  const isUnique = (value) => {
    debugger;
    return axios.post('/api/v1/users/email_validations', { email: value, token: this.$store.state.auth.JWT }).then((response) => {
      // Notice that we return an object containing both a valid property and a data property.
      return {
        valid: response.data.valid,
        data: {
          message: response.data.message
        }
      };
    });
  };

  // The messages getter may also accept a third parameter that includes the data we returned earlier.
  Validator.extend('unique_email', {
    validate: isUnique,
    getMessage: (field, params, data) => {
      return data.message;
    }
  });
  ...

  export default {
    ...
  }
</script>

API にリクエストを送信するカスタム検証を作成したいと考えています。ただし、「export default」セクションの外にある this.$store にはアクセスできません。未定になりました。

次に、このコードをファイルに抽出し、それを必要とするコンポーネントにインポートしたいと思います。どうすればそれができますか？

私は Vue.js と Vee の検証が初めてなので、簡単な質問であれば申し訳ありません。

お時間とご関心をお寄せいただきありがとうございます。

4

1 に答える 1

1

Vee-validate は、コンポーネント/インスタンス プロパティに直接アクセスする方法を提供しません。this.$storeそのため、カスタム バリデータ コードでアクセスすることはできません。これを実現するには、複数の代替方法があります。

まず、トークンの非表示の読み取り専用入力フ​​ィールドを作成し、それをターゲットとして使用して、一意のフィールドを検証できます。詳細については、ドキュメントを確認してください。

また、トークンをインスタンス プロパティとして保存し、後でバリデータ コードで使用することもできます。

Vue インスタンスでは:

mounted() {
    Vue.prototype.token = this.$store.state.auth.JWT;
}

次に、バリデータファイルで：

import Vue from "vue";
...
const isUnique = (value) => {
//other code
return axios.post('/api/v1/users/email_validations', { email: value, token: Vue.prototype.token }).then((response) => {

  return {
    valid: response.data.valid,
    data: {
      message: response.data.message
    }
  };
});
于 2019-04-01T08:16:35.630 に答える