質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1605閲覧

vuetify TypeScriptのバリデーション

退会済みユーザー

退会済みユーザー

総合スコア0

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/04/27 02:40

newでインスタンス化せず、staticで呼び出す記述方法にしたいです。
恐れ入りますが、ご教示いただけますと幸いです。

.ts
Vue.config.devtools = true;

new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
// 各テキストボックスの値
text1: "",
text2: "",
text3: "",

// 送信が成功したかどうかのフラグ success: false, // 入力規則 required: value => !!value || "必ず入力してください", // 入力必須の制約 limit_length: value => value.length <= 10 || "10文字以内で入力してください" // 文字数の制約

},
methods: {
// 送信を試みるメソッド(「送信する」がクリックされたときに呼ばれる)
submit() {
if (this.$refs.test_form.validate()) {
// すべてのバリデーションが通過したときのみ
// if文の中に入る
this.success = true;
} else {
this.success = false;
}
}
}
});

.vue
<template>

<div id="app"> <v-app> <v-card> <v-card-title>STEP2: フォーム</v-card-title> <v-card-text> <v-form ref="test_form"> <v-text-field v-model="text1" label="入力必須で文字数制限のあるテキストフィールド" :rules="[required, limit_length]" counter="10" > </v-text-field> <v-text-field v-model="text2" label="入力必須のみあるテキストフィールド" :rules="[required]" > </v-text-field> <v-text-field v-model="text3" label="なんの制約もないテキストフィールド" > </v-text-field> </v-form> </v-card-text> <v-divider></v-divider> <v-card-actions> <v-btn text v-on:click="submit">送信する</v-btn> <span v-if="success">送信成功!</span> </v-card-actions> </v-card> </v-app> </div> </template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問