LoginSignup
0

More than 1 year has passed since last update.

【Vue.js】v-modelを使用したフォームの作成

Last updated at Posted at 2021-12-03

Tips1

基本的に公式リファレンスに丁寧に記述されているので細かいところはリファレンスを見てもらうのがいいと思う。
公式リファレンス

そのなかで気になった点だけ、記述する。

  • selectbox
    • optionにdisabledを使用しないとiosに上手く表示されないらしい
      • <option disabled value="">年齢を選択してください。</option>
    • v-model.オプションを選択できる。
      • .lazy
        • 全ての入力が完了されないとバインディングされない。
      • .number
        • 文字列ではなく整数で値がセットされる。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <div id="app">
      <form action="">
        氏名
        <input type="text" v-model="contact.yourName" />
        <br />
        電話番号
        <input type="tel" v-model="contact.tel" />
        <br />
        メールアドレス
        <input type="email" v-model.lazy="contact.email" />
        <br />
        性別
        <input type="radio" value="male" v-model="contact.gender" />男性
        <input type="radio" value="female" v-model="contact.gender" />女性
        <input type="radio" value="other" v-model="contact.gender" />その他
        <br />
        年齢
        <select type="text" v-model="contact.age">
          <option disabled value="">年齢を選択してください。</option>
          <option>10代</option>
          <option>20代</option>
          <option>30代</option>
          <option>40代〜</option>
        </select>
        <br />
        メッセージ
        <textarea type="text" v-model="contact.message"></textarea>
        <br />
        このサイトを知った理由
        <input
          type="checkbox"
          value="webサイト"
          v-model="contact.attracts"
        />webサイト
        <input
          type="checkbox"
          value="チラシ"
          v-model="contact.attracts"
        />チラシ
        <input
          type="checkbox"
          value="その他"
          v-model="contact.attracts"
        />その他
        <br />
        注意事項に同意する
        <input type="checkbox" v-model="contact.caution" />
      </form>
    </div>

    <script>
      let app = new Vue({
        el: "#app",
        data() {
          return {
            contact: {
              yourName: "",
              tel: "",
              email: "",
              gender: "",
              age: "",
              message: "",
              attracts: [],
              caution: false,
            },
          };
        },
      });
    </script>
  </body>
</html>

Tips2

  • formにバリデーションをつけたい場合は、@submit.preventを使う。
  • 送信ボタンを押してもrequestが飛ばない。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
        .error{
            color:red;
        }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <div id="app">
        <p v-if="errors.length">
            <ul>
                <li class="error" v-for="error in errors">{{error}}</li>
            </ul>
        </p>
      <form @submit.prevent='validate'> //この部分
        氏名
        <input type="text" v-model="contact.yourName" />
        <br />
        電話番号
        <input type="tel" v-model="contact.tel" />
        <br />
        メールアドレス
        <input type="email" v-model.lazy="contact.email" />
        <br />
        性別
        <input type="radio" value="male" v-model="contact.gender" />男性
        <input type="radio" value="female" v-model="contact.gender" />女性
        <input type="radio" value="other" v-model="contact.gender" />その他
        <br />
        年齢
        <select type="text" v-model="contact.age">
          <option disabled value="">年齢を選択してください。</option>
          <option>10代</option>
          <option>20代</option>
          <option>30代</option>
          <option>40代〜</option>
        </select>
        <br />
        メッセージ
        <textarea type="text" v-model="contact.message"></textarea>
        <br />
        このサイトを知った理由
        <input
          type="checkbox"
          value="webサイト"
          v-model="contact.attracts"
        />webサイト
        <input
          type="checkbox"
          value="チラシ"
          v-model="contact.attracts"
        />チラシ
        <input
          type="checkbox"
          value="その他"
          v-model="contact.attracts"
        />その他
        <br />
        注意事項に同意する
        <input type="checkbox" v-model="contact.caution" />
        <button type="submit" value="送信">送信</button>
      </form>
    </div>

    <script>
      let app = new Vue({
        el: "#app",
        data() {
          return {
            contact: {
              yourName: "",
              tel: "",
              email: "",
              gender: "",
              age: "",
              message: "",
              attracts: [],
              caution: false,
            },
            errors:[]
          };
        },
        methods:{
            validate(){
                this.errors = [] //初期化
                if(!this.contact.caution){
                    this.errors.push('注意事項にチェックを入れてください。')
                }

            }
        }
      });
    </script>
  </body>
</html>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0