フォーム入力の現在の値をVueコンポーネントプロップに渡す方法は？
デリックミラー
うまく機能する既存のHTMLサインアップフォーム（Laravelを使用して作成）があります。次のようなパスワード要件のチェックボックスを使用して徐々に拡張できるVueコンポーネントを作成しようとしています。
私の質問は、現在のパスワード値をコンポーネントの小道具に渡すにはどうすればよいですか？私が探しているのは一方向バインディングと呼ばれていると思いますが、よくわかりません。読む。
これが私のフォームの非常に単純化されたバージョンです：
<div id="app">
<form>
<input id="email" type="email" required>
<input id="passwordInput" type="password" required>
<password-requirements password="<How do I bind this to #passwordInput above?>" />
<button type="submit">Submit</button>
</form>
</div>
Vueアプリケーションインスタンスがページにアタッチされる方法と、コンポーネントが登録される方法は次のとおりです。
app.js
Vue.component('password-requirements', require('./components/PasswordRequirements.vue').default);
const app = new Vue({
el: '#app'
});
...そしてこれがカスタムコンポーネントのコードの簡略版です：
PasswordRequirements.vue
<template>
<!-- template html goes here -->
</template>
<script>
export default {
data: function () {
return {
hasLength: false,
hasLowercase: false,
hasUppercase: false,
hasNumberOrSymbol: false
}
},
props: {
password: {
type: String
}
},
methods: {
checkPassword: function() {
/* code to check password requirements goes here */
}
},
mounted() {
this.checkPassword();
}
}
</script>
繰り返しますが、私の質問は、現在のパスワード値を<password-requirements>コンポーネントの小道具に渡す方法です。これを再利用可能なコンポーネントに変えて、フォームに大きな変更を加えることなく、他の既存のフォームにすばやくドロップして、徐々に拡張できるようにしたいと思います。
ありがとう！
フィル
dataルートVueインスタンスにパスワードのプロパティを追加し、それを自分<input>とコンポーネントにバインドします
const app = new Vue({
el: '#app',
data: () => ({ password: '' })
});
<!-- bind the input value to your data property with v-model -->
<input id="passwordInput" type="password" v-model="password" required>
<!-- bind the password property to your component's prop -->
<password-requirements :password="password" />
コンポーネントでは、変更を監視してcheckPasswordメソッドを実行できます
watch: {
password (val) {
this.checkPassword()
}
}
mountedこの時点でフックを取り外すこともできます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
フォーム入力フィールドをReactの別のコンポーネントに渡す方法は？
- 2
フォームの入力値を別のコンポーネントに渡すReact
- 3
フォーム入力の値をReactの兄弟コンポーネントに渡します
- 4
Angular 2フォーム入力をtypescriptコンポーネントに渡す方法は？
- 5
ブロックフォームコンポーネントEmber.jsに挿入されたテンプレートからコンポーネントのアクションを起動する方法は？
- 6
Html入力値（Htmlフォーム）をJavaコントローラーに渡す方法は？-SpringMVC
- 7
Vue の別のコンポーネントのフォームに小道具を渡す方法
- 8
フォームコンポーネントに入力コンポーネントを挿入します：NgFormのプロバイダーはありません
- 9
コンポーネントからFormikマルチステップフォームウィザードに値を渡す方法は？
- 10
ngForループのインデックス値をコンポーネントに渡す方法は？
- 11
0.01ステップを使用するVueカスタム番号入力コンポーネントはint値のみを更新します
- 12
あるコンポーネントのTSファイルから別のコンポーネントにプロパティ値を単純に渡す方法
- 13
すでにレンダリングされているコンポーネントの入力値をプログラムで変更する方法（Angular 2）
- 14
プラットフォーム固有のコンポーネントをクロスプラットフォームコードに統合するXamarin
- 15
3つの入力があるが1つのyup値にマップするFormikおよびyupフォームコンポーネントを作成するにはどうすればよいですか？
- 16
入力テキストの値を取得し、それを子コンポーネントから親コンポーネントに渡す方法は？
- 17
未定義の Swing コンポーネントのプロパティをメソッドに渡す方法は?
- 18
入力の設定値はプログラムでコンポーネントDOMを更新しません
- 19
コンポーネントからReduxフォームに値を渡す方法
- 20
バックエンドコンポーネントのjoomlaフォームに複数の画像をアップロードする方法
- 21
プロパティバインディングを使用してAngularhtmlコンポーネントの入力にデータを渡す方法
- 22
カスタム入力コンポーネントから親コンポーネントの配列に入力値をプッシュするにはどうすればよいですか？
- 23
CakePHPの入力フォームからコントローラーにIDと値の両方を渡すにはどうすればよいですか？
- 24
FMX：フォームの重複サブコンポーネントに自作コンポーネントをドロップする
- 25
角度; フォーム入力のコンポーネントを変更する
- 26
.NETwebbrowserコントロール-ポップアップログインフォームへの入力を自動化します
- 27
vue-i18nを使用してVueコンポーネントプロップのデフォルト値を変換する
- 28
フォームグループデータを別のコンポーネントの送信ボタンに渡す方法（Angular 7）
- 29
ポップアップビューコントローラから前のビューコントローラに値を渡す方法は？
コメントを追加