Vue.jsで社用登録データフォームを作ってみた

  • 2017年8月31日
  • by 
Vue.jsで社用登録データフォームを作ってみた

今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。
「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。

なお、今回の作業フローは以下のような感じになります。

  • 「Vue.js」でスタイルを書き換える
  • 「Vue.js」で入力フォームと入力データをjson形式で送信

さらに詳しく「Vue.js」を知りたい方は、下記公式サイトをご参照ください。
<参照:「Vue.js」公式サイト

手順1:「Vue.js」でスタイルを書き換える

まずはdivのスタイルを書き換えてみましょう。
以下のようなコードになります。

上記コードの解説をすると……
1:「div」にidを付与する
2:「input」要素にはv-modelでname値やid値のような値を振る
   例) v-model=”borderColor”
3:出力したい値に「{{…..}}」を書く

これが終わったら次に「script」を書いてみましょう。

今回はjQueryを使っていたので、jQueryのリンクと「Vue.js」のリンクが必要となります。

これにより下の動画ようになります。

手順2:「Vue.js」で入力フォームと入力データをjson形式で送信

それでは入力フォームと入力データをjson形式で送信してみましょう。
htmlは以下のようになります。

これにより下の動画ようになります。

先の「手順1」では、v-modelの値は一個ずつ設定しましたが、「手順2」では “user” の中に書き込んでいる形で書いています。
「Vue.js」のスクリプトは先と同様、保存をクリックした時に登録した内容がuserに保存されます。

下記はThis.userです。中身がjson形式になってます。

これをajaxで送信したいのであれば以下のような記述が必要になります。

これだけで「送信→データ登録」ができるようになるんですね!

コメント