誰もが各チップアイテムの検証を行う方法を知っていますか?
私はこのコードを持っています:
<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 件
関連記事
- Primengテーブルをダブルクリックする代わりに、セル編集のためにシングルクリックでセルテキスト全体を選択します
- D3は、selectAll()ではなくselect()が実行されている場合にのみ、すべてのパスを更新します。
- Javascript:複数の選択ボックスから値の代わりにテキストを取得する
- ドロップダウンセルの検証値を選択する方法
- セルではなく行全体を強調表示する
- 選択時のチェックボックス検証
- 正規表現、単語が含まれている場合に文全体を選択するにはどうすればよいですか?
- ハイフンで適切に区切られた2つの選択ボックスまたは入力ボックスを使用してレイアウトをVuetifyします。これを適切に配置するにはどうすればよいですか?
- 2つのテキストフィールド間の検証、vuetify
- Laravel検証メッセージには「検証」が含まれています。カスタムエラーメッセージの代わりに
関連した質問
- 複数の型と型付き配列を使用したVuejsプロップ検証
- タイプ 'string'のパラメーターを持つインデックス署名がタイプDataTypeで見つかりませんでした
- ゲッターが正しく呼び出されない
- ESLint&Vue:次の場所での `$log`の使用を禁止するにはどうすればよいですか?
- 既存のインターフェースを使用してインターフェースを拡張する
- Vueテストユーティリティウォッチテスト
- vuejs:小道具とイベントを動的コンポーネントに動的に渡す方法
- Angularの別のコンポーネントからモーダルダイアログを呼び出す適切な方法は?
- フィルタ付きのVueテンプレートで三項演算子を使用するにはどうすればよいですか?
- ループバック4でrequestBodyを作成するためのベストプラクティスは何ですか?
v-chip
の検証機能が組み込まれていないようです 。したがって、デフォルトの検証(vee-validateではありません)を使用しています。そのようにして、v-selectの結果を見ることができます。その後、結果をループして、各値を検証できます。