Nuxt3 composables v-textareaに入力ルールの設定
Nuxt3 Vuetify vtextarea This article explains how to create a file with input rules in Nuxt3's composables directory, set the input rules in Vuetify's vtextarea, and validate the input string. The article includes code examples and screenshots.
by JanitorSep 20, 2023
Nuxt3のcomposablesディレクトリに入力ルールを記載したファイルを作成して、Vuetifyのv-textareaに入力ルールを設定し、入力された文字列のバリデーションを行います。
Nuxt3のcomposablesディレクトリに入力ルールを記載したファイルを作成して、Vuetifyのv-textareaに入力ルールを設定し、入力された文字列のバリデーションを行います。
Jump Links
1. 入力ルールを記載したファイルを作成
2. v-textareaでバリデーション
3. 動作確認
1. 入力ルールを記載したファイルを作成
1. 入力ルールを記載したファイルを作成
今回の記事のフォルダ構成は下の画像のようになっています。プロジェクトディレクトリに「composables」というディレクトリを作成し、その下に「rules.ts」という入力ルールを記載するファイルを作成します。そこで作成したルールを、index.vueで呼び出します。
今回の記事のフォルダ構成は下の画像のようになっています。プロジェクトディレクトリに「composables」というディレクトリを作成し、その下に「rules.ts」という入力ルールを記載するファイルを作成します。そこで作成したルールを、index.vueで呼び出します。
rules.tsでは下記のようにルールを記載しました。必須入力「ruleRequired」、8文字以上の入力「rule8more」を作成しています。
rules.tsでは下記のようにルールを記載しました。必須入力「ruleRequired」、8文字以上の入力「rule8more」を作成しています。
composables/rules.ts
export const myRules = () => {
return {
ruleRequired: (v: any) => !!v || "Required",
rule8more: (v: string) => (!!v && v.length >= 8 ) || "8 or more characters",
};
};
composables/rules.ts
export const myRules = () => {
return {
ruleRequired: (v: any) => !!v || "Required",
rule8more: (v: string) => (!!v && v.length >= 8 ) || "8 or more characters",
};
};
2. v-textareaでバリデーション
2. v-textareaでバリデーション
作成したルールを読み込んで、v-textareaのpropsの一つである"rules"に設定します。
作成したルールを読み込んで、v-textareaのpropsの一つである"rules"に設定します。
pages/index.vue
<script setup>
const { ruleRequired, rule8more } = myRules();
var userInput = reactive( { value: "" } );
var validate = computed( () => !( ruleRequired( userInput.value ) === true && rule8more( userInput.value ) === true ) );
var clickBtn = () => {
console.log( "User input OK." );
}
</script>
<template>
<div class="pa-3">
<v-textarea
v-model="userInput.value"
:rules="[ ruleRequired, rule8more ]">
</v-textarea>
<VBtn
:disabled="validate"
@click="clickBtn">
test
</VBtn>
</div>
</template>
<style>
</style>
pages/index.vue
<script setup>
const { ruleRequired, rule8more } = myRules();
var userInput = reactive( { value: "" } );
var validate = computed( () => !( ruleRequired( userInput.value ) === true && rule8more( userInput.value ) === true ) );
var clickBtn = () => {
console.log( "User input OK." );
}
</script>
<template>
<div class="pa-3">
<v-textarea
v-model="userInput.value"
:rules="[ ruleRequired, rule8more ]">
</v-textarea>
<VBtn
:disabled="validate"
@click="clickBtn">
test
</VBtn>
</div>
</template>
<style>
</style>
3. 動作確認
3. 動作確認
yarn devを実行してアクセスすると下の画像のように表示され、8文字以上を入力していないと、v-textareaの下にエラー用のメッセージが表示され、ボタンはクリックできない状態になります。
yarn devを実行してアクセスすると下の画像のように表示され、8文字以上を入力していないと、v-textareaの下にエラー用のメッセージが表示され、ボタンはクリックできない状態になります。
8文字以上を入力すると下の画像のように表示され、v-textareaの下に出ていたエラーメッセージは消え、ボタンもクリック可能な状態になります。
8文字以上を入力すると下の画像のように表示され、v-textareaの下に出ていたエラーメッセージは消え、ボタンもクリック可能な状態になります。
Nuxt3 composables v-textareaに入力ルールの設定
Nuxt3 Vuetify vtextarea This article explains how to create a file with input rules in Nuxt3's composables directory, set the input rules in Vuetify's vtextarea, and validate the input string. The article includes code examples and screenshots.
by JanitorSep 20, 2023
Nuxt3のcomposablesディレクトリに入力ルールを記載したファイルを作成して、Vuetifyのv-textareaに入力ルールを設定し、入力された文字列のバリデーションを行います。
Nuxt3のcomposablesディレクトリに入力ルールを記載したファイルを作成して、Vuetifyのv-textareaに入力ルールを設定し、入力された文字列のバリデーションを行います。
Jump Links
1. 入力ルールを記載したファイルを作成
2. v-textareaでバリデーション
3. 動作確認
1. 入力ルールを記載したファイルを作成
1. 入力ルールを記載したファイルを作成
今回の記事のフォルダ構成は下の画像のようになっています。プロジェクトディレクトリに「composables」というディレクトリを作成し、その下に「rules.ts」という入力ルールを記載するファイルを作成します。そこで作成したルールを、index.vueで呼び出します。
今回の記事のフォルダ構成は下の画像のようになっています。プロジェクトディレクトリに「composables」というディレクトリを作成し、その下に「rules.ts」という入力ルールを記載するファイルを作成します。そこで作成したルールを、index.vueで呼び出します。
rules.tsでは下記のようにルールを記載しました。必須入力「ruleRequired」、8文字以上の入力「rule8more」を作成しています。
rules.tsでは下記のようにルールを記載しました。必須入力「ruleRequired」、8文字以上の入力「rule8more」を作成しています。
composables/rules.ts
export const myRules = () => {
return {
ruleRequired: (v: any) => !!v || "Required",
rule8more: (v: string) => (!!v && v.length >= 8 ) || "8 or more characters",
};
};
composables/rules.ts
export const myRules = () => {
return {
ruleRequired: (v: any) => !!v || "Required",
rule8more: (v: string) => (!!v && v.length >= 8 ) || "8 or more characters",
};
};
2. v-textareaでバリデーション
2. v-textareaでバリデーション
作成したルールを読み込んで、v-textareaのpropsの一つである"rules"に設定します。
作成したルールを読み込んで、v-textareaのpropsの一つである"rules"に設定します。
pages/index.vue
<script setup>
const { ruleRequired, rule8more } = myRules();
var userInput = reactive( { value: "" } );
var validate = computed( () => !( ruleRequired( userInput.value ) === true && rule8more( userInput.value ) === true ) );
var clickBtn = () => {
console.log( "User input OK." );
}
</script>
<template>
<div class="pa-3">
<v-textarea
v-model="userInput.value"
:rules="[ ruleRequired, rule8more ]">
</v-textarea>
<VBtn
:disabled="validate"
@click="clickBtn">
test
</VBtn>
</div>
</template>
<style>
</style>
pages/index.vue
<script setup>
const { ruleRequired, rule8more } = myRules();
var userInput = reactive( { value: "" } );
var validate = computed( () => !( ruleRequired( userInput.value ) === true && rule8more( userInput.value ) === true ) );
var clickBtn = () => {
console.log( "User input OK." );
}
</script>
<template>
<div class="pa-3">
<v-textarea
v-model="userInput.value"
:rules="[ ruleRequired, rule8more ]">
</v-textarea>
<VBtn
:disabled="validate"
@click="clickBtn">
test
</VBtn>
</div>
</template>
<style>
</style>
3. 動作確認
3. 動作確認
yarn devを実行してアクセスすると下の画像のように表示され、8文字以上を入力していないと、v-textareaの下にエラー用のメッセージが表示され、ボタンはクリックできない状態になります。
yarn devを実行してアクセスすると下の画像のように表示され、8文字以上を入力していないと、v-textareaの下にエラー用のメッセージが表示され、ボタンはクリックできない状態になります。
8文字以上を入力すると下の画像のように表示され、v-textareaの下に出ていたエラーメッセージは消え、ボタンもクリック可能な状態になります。
8文字以上を入力すると下の画像のように表示され、v-textareaの下に出ていたエラーメッセージは消え、ボタンもクリック可能な状態になります。