カスタムコンポーネントの vee-validate で immediate が効かない

◆環境

  • “nuxt”: “^2.13.0”
  • “nuxt-property-decorator”: “^2.7.2”
  • “vee-validate”: “^3.3.7”

◆概要
上記環境で、単純なカスタムコンポーネント(TextBox)を作成しました。
そして親画面で、上記コンポーネントを VeeValidate と組み合わせて利用しようとしています。

TextBox にフォーカスを当てて入力値を変化させることで、確かに意図通り検証が効きます。
(値を空にしたときだけOKボタンが無効になります。)

ただ、画面表示したときに値 ‘aaa’ が入っているためOKボタンが有効な状態を期待しているのですが、無効な状態になっています。
画面表示時点でOKボタンが有効な状態にする(検証が走った状態で始める)には、どうすればいいでしょうか?

◆カスタムコンポーネント(TextBox)の実装

<template>
  <input :name="name" type="text" :value="value" @input="onInput" />
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator'

@Component
export default class TextBox extends Vue {
  @Prop()
  value!: string

  @Prop({ default: '' })
  name!: string

  @Emit('input')
  onInput(e: any) {
    return e.target.value
  }
}
</script>

◆親画面の実装

<template>
  <validation-observer ref="obs" v-slot="{ invalid, validated }">
    <validation-provider name="name" rules="required" :immediate="true">
      <text-box v-if="true" v-model="name" name="text-box" />
      <!-- 上記 v-if を false にして 下記 input タグの方を有効にすると、初期状態含め意図通りに動く -->
      <input v-else v-model="name" name="input" type="text" />
    </validation-provider>
    <button :disabled="invalid || !validated">OK</button>
  </validation-observer>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { ValidationObserver, ValidationProvider } from 'vee-validate'
const TextBox = () => import('@/components/atoms/TextBox.vue')

@Component({
  components: {
    ValidationObserver,
    ValidationProvider,
    TextBox,
  },
})
export default class Index extends Vue {
  name: string = 'aaa'
}
</script>

すみません、自己解決?しました。

親画面の実装で、カスタムコンポーネントの import を

const TextBox = () => import('@/components/atoms/TextBox.vue')

と dynamic import していたのですが、普通?に

import TextBox from '@/components/atoms/TextBox.vue'

としたところ、初期状態含めて正しく検証されるようになりました!

1 Like