【vue.js】input フォームの書き方

フォームの書き方の備忘録

submit ボタンを押したら、確認のテキストが表示されるようにする例

submitボタン押す前

submitボタン押した後

src/App.vue

<template>
<div id="app">

//普通のテキストボックス
<p> <span>Message is: </span><br>
<input v-model="message" placeholder="edit me">
</p>

//テキストエリア

<p> <span>Long Message is: </span><br>
<textarea v-model="lmessage" placeholder="edit me"></textarea>
</p>

//チェックボックス１個

<p> <span>One Checkbox is: </span><br>
<label>Check it!</label>
<input type="checkbox" id="checkbox" v-model="checked">
</p>

//チェックボックス複数

<p> <span>Several Checkboxes are: </span><br>
<ul>
<li v-for="cb in checkboxs" v-bind:key="cb.id">
<label>{{cb.value}}</label>
<input type="checkbox" v-bind:id="cb.value" v-bind:value="cb.value" v-model="checkedNames">
</li>
</ul>
</p>

//ラジオボタン

<p> <span>Several Radios are: </span><br>
<ul>
<li v-for="rd in radios" v-bind:key="rd.id">
<label>{{rd.value}}</label>
<input type="radio" v-bind:id="rd.value" v-bind:value="rd.value" v-model="checkedMovies">
</li>
</ul>
</p>

//セレクトボックス

<p> <span>Select Boxes are: </span><br>
<select v-model="selected">
<option v-for="op in options" v-bind:key="op.id">
{{op.value}}
</option>
</select>
</p>

//送信ボタン

<p>
<button v-on:click="confirm">Submit</button>
</p>

//確認テキスト表示

<p v-if="seen">
<span>your data is</span><br>
message: {{c_message}}<br>
lmessage: {{c_lmessage}}<br>
checked: {{c_checked}}<br>
checkedNames:{{c_checkedNames}}<br>
checkedMovies: {{c_checkedMovies}}<br>
selected: {{c_selected}}<br>
</p>
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
checkboxs: [
{id:1, value:"John"},
{id:2, value:"Mike"},
{id:3, value:"Sam"}
],
radios: [
{id:1, value:"Star Wars"},
{id:2, value:"Harry Potter"},
{id:3, value:"Beauty and the Beast"}
],
options: [
{id:1, value:"Star Wars"},
{id:2, value:"Harry Potter"},
{id:3, value:"Beauty and the Beast"}
],
message: '',
lmessage: '',
checkedNames: ,
checked: '',
checkedMovies: '',
selected: '',
seen: false,
c_message: '',
c_lmessage: '',
c_checkedNames: ,
c_checked: '',
c_checkedMovies: '',
c_selected: '',
}
},
methods:{
confirm: function () {
this.seen = true;
this.c_message = this.message;
this.c_lmessage = this.lmessage;
this.c_checkedNames = this.checkedNames;
this.c_checked = this.checked;
this.c_checkedMovies = this.checkedMovies;
this.c_selected = this.selected;
}
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
span {
font-weight:bold;
}
ul li{
display: inline;
}
p {
margin-top: 20px;
}
</style>

以上ですー！

時間があれば、いつか、バリデーションを行う方法も紹介できれば、、、と思います

おやすみなさいぃぃぃ