Tips1
基本的に公式リファレンスに丁寧に記述されているので細かいところはリファレンスを見てもらうのがいいと思う。
公式リファレンス
そのなかで気になった点だけ、記述する。
- selectbox
- optionにdisabledを使用しないとiosに上手く表示されないらしい
<option disabled value="">年齢を選択してください。</option>
- v-model.オプションを選択できる。
- .lazy
- 全ての入力が完了されないとバインディングされない。
- .number
- 文字列ではなく整数で値がセットされる。
- .lazy
- optionにdisabledを使用しないとiosに上手く表示されないらしい
<!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>