毎日のスキル#
序文#
最近、友人が Vue を使用している際に問題に遭遇しました。
当時、期末発表のためにコードを整理する時間がなかったので、今日、コンピュータのファイルを整理しているときに友人に送ったコードを見つけました。考えとコードを整理して、記事を投稿することにしました。より多くの人に役立てればと思います。
要件#
フォームにデータを入力し、ボタンをクリックして送信すると、データがテーブルに表示されるようにする。
要件分析#
フォームのデータをテーブルのデータにバインドし、送信ボタンをクリックした後にデータをテーブルに表示することができます。
submitForm メソッドを使用してフォームの送信ロジックを処理できます。
v-model を使用してデータの双方向バインディングを実現できます。
以下はコードの実装です。詳細は以下のコード解析を参照してください。
コードの実装#
<!-- VueのJavaScriptファイルをインポート -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- フォームのHTML構造を定義 -->
<div id="app">
<form>
<label>ユーザー名：</label>
<input type="text" v-model="username" /><br>
<label>パスワード：</label>
<input type="password" v-model="password" /><br>
<button type="submit" @click.prevent="submitForm">登録</button>
</form>
<!-- 送信後のデータ表示フォームを定義 -->
<div v-if="submitted">
<label>ユーザー名：</label>
<span>{{ username }}</span><br>
<label>パスワード：</label>
<span>{{ password }}</span><br>
</div>
</div>
<!-- Vueインスタンスを定義し、データの双方向バインディングを実装 -->
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
submitted: false
},
methods: {
submitForm() {
// フォームが送信されたときにsubmittedステータスを更新し、下のフォームにユーザー名とパスワードを表示する
this.submitted = true;
}
}
});
</script>
コード解析#
v-modelは Vue.js のディレクティブであり、双方向データバインディングを実現するために使用されます。
このコードでは、v-modelディレクティブを使用してフォームの入力フィールドを Vue インスタンスのデータにバインドしています。たとえば、ユーザー名の入力フィールドにコンテンツを入力すると、Vue インスタンスのusernameプロパティの値も更新されます。逆に、Vue インスタンスでusernameプロパティの値を変更すると、ユーザー名の入力フィールドのコンテンツも更新されます。
これにより、フォームのデータを統一されたデータモデルで管理し、フォームデータの双方向バインディングを実現することができます。
また、このコードでは、submittedという状態を定義しています。初期値はfalseです。フォームが送信された後、submitted状態をtrueに設定します。
この状態の役割は、フォームが送信された後のデータ表示フォームの表示 / 非表示状態を制御することです。具体的には、Vue のディレクティブv-ifを使用して、submitted状態の値に基づいてデータ表示フォームを表示するかどうかを決定します。
submitted状態がtrueの場合、データ表示フォームが表示されます。逆に、submitted状態がfalseの場合、データ表示フォームは非表示になります。