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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

今回は社内用データ登録フォームを作ろうと思い、初めて「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は以下のようになります。



送信データーはこれです:{{submitData|jason}}

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

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


です。
var register = new Vue({
   el:"#register",
   data:{
       user:{
           name:null,
           mail:null,
           confirm_mail:null,
           password:null,
           site:null,
       },
       submitData:null
   },
   methods:{
       dologin:function () {
           this.submitData = this.user;
       }
   }
})

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

{ "name": "may", "mail": "may@test.jp", "confirm_mail": "may@test.jp", "password": "maymay", "site": "http://may.hp" }

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

$.ajax({
   url: "save_json.php",//ここがphp側で受け取るコーディング
   type: "POST",
   contentType: "Content-Type: application/json; charset=UTF-8",
   dataType: 'json',
   data: JSON.stringify(this.submitData),
   success: function (data) {//成功したら
      console.log("well done!!Success!!")
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) {//失敗したら
     consoel.log("Error!")
   }
});

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ