動的にコンポーネントを切り替える
まずHome.vueとAbout.vueを用意しておく
Home.vue
<template>
<p>Home</p>
</template>
About.vue
<template>
<div>
<p>About</p>
<input>
</div>
</template>
App.vue
<template>
<div>
<LikeHeader>
<h3>初めまして</h3>
</LikeHeader>
<LikeNumber :number="number" @my-click="incrementNumber"></LikeNumber>
<button @click="currentComponent = 'Home'">Home</button>
<button @click="currentComponent = 'About'">About</button>
<component v-bind:is="currentComponent"></component>
</div>
</template>
<script>
import LikeHeader from "./components/LikeHeader.vue"
//新しく作ったコンポーネントをimprot
import About from "./components/About.vue"
import Home from "./components/Home.vue"
export default {
data() {
return {
number: 10,
currentComponent: "Home"
}
},
components: {
LikeHeader,
//新しく作ったコンポーネントを登録
About,
Home
},
methods: {
incrementNumber(value) {
this.number = value
}
}
}
</script>
注目すべきは
.vue
<component v-bind:is="currentComponent"></component>
v-bind:is=""の""にコンポーネント名を入れると、そのコンポーネントが表示されるようになる。
これで、Homeボタンを押すと、Home.vueが表示され、Aboutボタンを押すと、About.vueが表示されるようになる。
この切り替えの際に、毎回インスタンスがdestroyされることに注意する。
keep-aliveを使って動的コンポーネントの状態を維持する
App.vue
<keep-alive>
<component v-bind:is="currentComponent"></component>
</keep-alive>
このようにコンポーネントタグをkeep-aliveタグで囲むだけで前回の状態を保持することができる。
inputタグの中身もこれで残すことができる。
activatedとdeactivated
About.vue
<template>
<div>
<p>About</p>
<input>
</div>
</template>
<script>
export default {
deactivated() {
//Homeボタンが押された時の処理を書く。
},
activated() {
//Aboutボタンが押された時の処理を書く。
}
}
</script>
Vue.jsでフォームを作ろう
v-modelにオブジェクトを指定する
App.vue
<template>
<div>
<LikeHeader>
<h3>初めまして</h3>
</LikeHeader>
<LikeNumber :number="number" @my-click="incrementNumber"></LikeNumber>
<button @click="currentComponent = 'Home'">Home</button>
<button @click="currentComponent = 'About'">About</button>
<keep-alive>
<component v-bind:is="currentComponent"></component>
</keep-alive>
<div>
<h2>イベントフォーム</h2>
<label for="title">タイトル</label>
<input id="title" type="text" v-model="eventData.title">
<p>{{ eventData.title}}</p>
</div>
</div>
</template>
<script>
import LikeHeader from "./components/LikeHeader.vue"
import About from "./components/About.vue"
import Home from "./components/Home.vue"
export default {
data() {
return {
number: 10,
currentComponent: "Home",
eventData: {
title: "タイトル"
}
}
},
components: {
LikeHeader,
About,
Home
},
methods: {
incrementNumber(value) {
this.number = value
}
}
}
</script>
注目すべきはこれ
<input id="title" type="text" v-model="eventData.title">
.lazy
<input id="title" type="text" v-model.lazy="eventData.title">
v-modelに.lazyをつけると、inputタグからフォーカスを外した時に双方向バインディングが起きる。
.number
<input id="maxNumber" type="number" v-model.number="eventData.maxNumber">
v-modelに.numberをつけると、inputタグから返される数字のdata型が、
StringからNumberに変えることができる。ただそれだけ。
.trim
先頭と最後の空白を除いたものを返すことができる。
<input id="host" type="text" v-model.trim="eventData.host">
複数行テキストに対して双方向バインディング
<label for="detail">イベントの内容</label>
<textarea id="detail" cols="30" rows="10" v-model="eventData.detail"></textarea>
<pre>{{ eventData.detail }}</pre>
単体のチェックボックス
<input type="checkbox" id="isPrivate" v-model="eventData.isPrivate">
<label for="isPrivate">非公開</label>
<p>{{ eventData.isPrivate }}</p>
label for="idの名前"にすると、labelの文字をクリックしてもチェックボックスが反応するようになる。
また、今回のisPrivateというプロパティの型はboolean。クリックするごとに切り替わる。
複数のチェックボックス
<p>参加条件</p>
<input type="checkbox" id="10" value="10代" v-model="eventData.target">
<label for="10">10代</label>
<input type="checkbox" id="20" value="20代" v-model="eventData.target">
<label for="20">20代</label>
<input type="checkbox" id="30" value="30代" v-model="eventData.target">
<label for="30">30代</label>
<p>{{eventData.target}}</p>
複数の時は、v-modelに指定するプロパティの初期値を[]にしておいて、配列を返せるようにしておけば良い。
これで、チェックが入ったら、その値が配列に入る。
ラジオボタン
<p>参加費</p>
<input type="radio" id="free" value="無料" v-model="eventData.price">
<label for="free">無料</label>
<input type="radio" id="paid" value="有料" v-model="eventData.price">
<label for="paid">有料</label>
1.ラジオボタンを設置し、value="~~"と属性をつける。
2.v-modelで指定したプロパティ名の初期値をvalue属性の名前にすると、最初からそのボタンが選択された形になる。
セレクトボックス
<p>開催場所</p>
<select v-model="eventData.location">
<option v-for="location in locations" :key="location">{{location}}</option>
</select>
<p>{{eventData.location}}</p>
1.v-forを使ってセレクトボックスを配置
2.v-model="~~"で指定したプロパティの初期値に、セレクトボックスの値の1つを指定してあげれば、それが初期表示されるようになる。
コンポーネントでv-modelを使う
これは難しいので、後でゆっくり学習します。。