やりたいこと

$store.getters.myWallet（自分のもっている残高）より多い金額を入力した時、Veevalidateを使用してバリデーションをかけたい

状況

バリデーションの値として max_valueに $store.getters.myWallet が指定できないということであれば、VeeValidationにはカスタムルールを設定することもできますので、そちらを使う必要がありますね。
ありがとうございます。カスタムルールを使って設定しようとしていたのですが、同じようにエラーが出て、どのようにstoreの値を参照・設定したら良いかわからず詰まっています。。

コンソールエラー
Uncaught (in promise) TypeError: Cannot read property 'getters' of undefined

環境

@vue/cli 4.5.11
"firebase": "^8.3.1",
"vee-validate": "^3.4.5",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.6.2"

ソースコード

vue
1        <ValidationObserver>
2          <ValidationProvider name="tipping" rules="my_rule" v-slot="{ errors }">
3            <input type="text" class="text" v-model="tippingWallet">
4            <p>{{ errors[0] }}</p>
5          </ValidationProvider>
6          <div id="button-content">
7            <p><button @click="closeSendModal" class="modal-button">送信</button></p>
8          </div>
9        </ValidationObserver>

vue
1const myRule = {
2  params: ['str'],
3  message: '所持金が足りません。',
4  validate(value, {str}) {
5    return value <= this.$store.getters.myWallet;
6  }
7};
8extend('my_rule', myRule);

全体ソースコード

vue
1<template>
2  <div id="overlay" v-show="showContent2" @click.self="onlyCloseSendModal">
3    <div id="main-content">
4        <p>あなたの残高：{{ $store.getters.myWallet }}</p>
5        <p>送る金額</p>
6        <ValidationObserver v-slot="{ invalid }">
7          <ValidationProvider name="tipping" rules="my_rule" v-slot="{ errors }">
8            <input type="text" class="text" v-model="tippingWallet">
9            <p>{{ errors[0] }}</p>
10          </ValidationProvider>
11          <div id="button-content">
12            <p><button @click="closeSendModal" class="modal-button" :disabled="invalid">送信</button></p>
13          </div>
14        </ValidationObserver>
15    </div>
16  </div>
17</template>
18
19<script>
20/* eslint-disable */
21import { ValidationObserver, ValidationProvider, extend, required, numeric, max_value} from '@/VeeValidate/index.js';
22
23// 必須
24extend('required', {
25  ...required,
26  message: '必須です。'
27});
28// 数値
29extend('numeric', {
30  ...numeric,
31  message: '数値で入力してください。'
32});
33
34const myRule = {
35  params: ['str'],
36  message: '所持金が足りません。',
37  validate(value, {str}) {
38    return value <= 500;
39  }
40};
41extend('my_rule', myRule);
42
43export default {
44  components: {
45    ValidationObserver,
46    ValidationProvider,
47  },
48  data () {
49    return {
50      showContent2: false,
51      tippingWallet: '',
52      aaa: this.$store.getters.myWallet
53    }
54  },
55  methods: {
56    openSendModal (){
57      this.$emit('openSendModal');
58    },
59    closeSendModal (){
60      this.$emit('closeSendModal', this.tippingWallet);
61    },
62    onlyCloseSendModal (){
63      this.$emit('onlyCloseSendModal');
64      this.tippingWallet = ''
65    },
66  },
67  computed: {
68    users () {
69      return this.$store.getters.users
70    },
71    modalData () {
72      return this.$store.getters.modalData
73    },
74    myWallet () {
75      return this.$store.getters.myWallet
76    }
77  }
78}
79</script>
80