【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方

🎈 この記事はWPへ移行しました
【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方

# 前置き

よく見る入力フォームですよね！
今回はこちらを解説していきます🌟
webサイトのお問い合わせや
アンケートに使われるフォームです。
今回はv-modelで基本的な作り方をご紹介！


※データの送信まではやりません。
別記事で解説します。
その代わりにフォームに入力した内容を
表示させる部分を作っています。
UserDataが表示部分です。
まずはここまでやってみましょう！
1番簡単なinput(type="text")が分かれば簡単です🌟

# 構成

form内に
各タグと送信ボタンを入れて作ります。
今回は送信しないため、
buttonはクリックするだけです。
formのイベントに
イベント修飾子の.preventをつけないと、
input入力をする際にリロードされてしまいます。
毎度のことですがスタイリングは省きます。

index.vue
<form @submit.prevent>
 // inputなどはform内に！
 <input>
 // 送信ボタンももちろんform内
 <button type="submit">アンケートを終了する</button>
</form>

# input(type="text")

まずはinputの基本から。
inputをlabelで囲みます。
ベースはこれだけ😌
今回はこちらの書き方で統一します！！

<label><input type="text"></label>

囲まない場合は
labelとinputが1セットであることが
わかるようにforとidで関連付けをします。
これがないとlabelを押しても
inputが反応してくれません😲

<label for="name"></label>
<input type="text" id="name">

では、囲む方の書き方で
v-modelを追加しましょう！

<template>
 <label>
  お名前
  <input
   type="text"
   v-model="userData.name"
  >
 </label>

 <div class="userdata">
  <h3>UserData</h3>
  <p>お名前: {{ userData.name }}</p>
 </div>
</template>

<script>
export default {
data () {
  return {
    userData: {
      // 初期値を入れる
      name: '',
    },
  }
},
}
</script>

簡単ですね。
ちなみに苗字と名前でフォームを分けて
1行で表示させたい！って時はsplitを使用します。
今回は省きます。

# input(type="checkbox")

基本の型は上のinput(type="text")でご確認を！
v-modelで同じdataの配列にし、
チェックした物をvalueで表示させます。
チェックボックスは複数選べるので配列です。

<template>
 <label>
 <input
   type="checkbox"
   value="SNS"
   v-model="hear"
 >
 SNS
 </label>

 <label>
  <input
   type="checkbox"
   value="知り合いの紹介"
   v-model="hear"
  >
  知り合いの紹介
 </label>

 <label>
  <input
   type="checkbox"
   value="雑誌"
   v-model="hear"
  >
  雑誌
 </label>

 <div class="userdata">
  <h3>UserData</h3>
  <p>お名前: {{ userData.name }}</p>
  <p>きっかけ: {{ hear }}</p>
 </div>
</template>

<script>
export default {
data () {
  return {
    userData: {
      // 初期値を入れる
      name: '',
    },
    hear: [],
  }
},
}
</script>

ただこのままだと表示の見栄えが悪いので、
valueのみを表示させましょう！

// 修正前
<p>きっかけ: {{ hear }}</p>

// 修正後
<ul>
 <li
  v-for="value in hear"
  :key="value"
 >
  {{ value }}
 </li>
</ul>

# input(type="radio")

基本の型は上のinput(type="text")でご確認を！
あとはほとんど
input(type="checkbox")と同じです♪
dataはradioで1つしか選択できないため
配列にする必要はありません。

<template>
  <label>
  <input
   type="radio"
   value="Male"
   v-model="gender"
  >
  男性
 </label>
 <label>
  <input
   type="radio"
   value="Female"
   v-model="gender"
  >
  女性
 </label>

 <div class="user-data">
  <h3>UserData</h3>
  <p>お名前: {{ userData.name }}</p>
  <p>性別： {{ gender }}</p>
  <ul>
   <li
    v-for="value in hear"
    :key="value"
   >
    {{ value }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
data () {
  return {
    userData: {
      name: '',
    },
    hear: [],
    gender: '',
  }
},
}
</script>

# textarea

こちらはinput(type="text")と全く同じです！
template内のみ記載します。
textareaで改行しても表示では改行されません。
そのためpタグにclassをつけ
white-spaceを使用しても良いですね！

<template>
 <label>
   <textarea
     rows="4"
     cols="40"
     v-model="message"
   />
 </label>

 <div class="user-data">
  <h3>UserData</h3>
  <p>お名前: {{ userData.name }}</p>
  <p>性別： {{ gender }}</p>
  <ul>
   <li
    v-for="value in hear"
    :key="value"
   >
    {{ value }}
   </li>
　　<p class="message">ご意見： {{ message }}</p>
  </ul>
 </div>
</template>

# select

今までのinput, textareaと
書き方はほとんど一緒です。
selectタグ内の選択肢optionを
配列として扱うことができます。
いちいちoptionを繰り返さなくて良いです！
楽ちん♪
この場合はperiods, periodの2つの
データ初期値を設定してあげましょう〜！

<template>
 <label>
   <select
      v-model="period"
   >
     <option
        v-for="period in periods"
        :key="period"
     >
       {{ period }}
     </option>
   </select>
 </label>
</template>

<div class="user-data">
 <h3>UserData</h3>
 <p>お名前: {{ userData.name }}</p>
 <p>性別: {{ gender }}</p>
 <p>きっかけ:</p>
 <ul>
   <li
     v-for="value in hear"
     :key="value"
   >
     {{ value }}
   </li>
 </ul>
 <p>来店日 {{ period }}</p>
 <p>ご意見： {{ message }}</p>
</div>

<script>
export default {
 data () {
   return {
     userData: {
       name: '',
     },
     hear: [],
     gender: '',
     message: '',
     periods: ['1週間以内', '2週間以内', '1ヶ月以内'],
     period: '',
   }
 },
}
</script>

次回はページ遷移アニメーションです🌟
公開予定日は12/18(水)です。

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪

タイトル未設定

🎈 この記事はWPへ移行しました
【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方