bugfix> javascript > 投稿

誰もが各チップアイテムの検証を行う方法を知っていますか?

私はこのコードを持っています:

<v-select
  class="elevation-0 mt-border-bottom"
  v-model="PhoneNumber"
  label="Add phone number"
  chips
  tags
  solo
  prepend-icon="phone"
  clearable
  :error-messages="errors.collect('Phone Number')"
  v-validate="'required|numeric'"
  data-vv-name="Phone Number"
  required
>
    <template slot="selection" slot-scope="data">
        <v-chip
          close
          outline
          dark
          @input="remove(data.item)"
          :selected="data.selected"
        >
            <strong>{{ data.item }}</strong>
        </v-chip>
    </template>
</v-select>
<script>
    export default {
        data () {
            return {
                PhoneNumber: []
            }
        },
        methods: {
            async submitNewNumber () {
                await this.$validator.validateAll().then((isValid) => {
                    if (isValid) {
                        console.log('submitted')
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

そして今、検証は電話番号入力全体でのみ行われています。 この入力内で、min_valueを9に、max_valueを15に設定して、各チップでどのように機能させるかを知りたいと思います。

Vuetify-チップの使用:https://vuetifyjs.com/en/components/chips

Vuetify-Vee検証:https://vuetifyjs.com/en/components/forms#example-vee-validate

Vee-validate-検証ルール:https://baianat.github.io/vee-validate/guide/rules.html

ありがとうございました

回答 1 件
  • v-chip の検証機能が組み込まれていないようです 。したがって、デフォルトの検証(vee-validateではありません)を使用しています。そのようにして、v-selectの結果を見ることができます。その後、結果をループして、各値を検証できます。

           inputRules = [
                (v: any) => {
                    if (!v || v.length < 1)
                        return 'Input is required';
                    else if (v.length > 0) {
                    for (let i = 0; i < v.length; i++) {
                        if (v[i].length > 9)
                            return 'Invalid Number';
                    }
                }
                    else return true;
                }
            ];
    
    
    <v-form ref="form" v-model="valid" lazy-validation>
            <v-select
                class="elevation-0 mt-border-bottom"
                v-model="phoneNumber"
                label="Add phone number"
                chips
                tags
                solo
                prepend-icon="phone"
                clearable
                data-vv-name="Phone Number"
                required
                :rules="inputRules"
            >
                <template slot="selection" slot-scope="data">
                    <v-chip
                        close
                        outline
                        dark
                        @input="remove(data.item)"
                        :selected="data.selected"
                    >
                        <strong>{{ data.item }}</strong>
                    </v-chip>
                </template>
            </v-select>
            <v-btn @click.native="submitNewNumber">Test</v-btn>
        </v-form>
    
    

あなたの答え