子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify]
Vuetifyのデザインコンポーネントはとても便利で、オプションをちょっと書くだけでUIのデザインや機能まで簡単にカスタマイズできます。
さらに、少し工夫するだけで親コンポーネントからもオプション類を操作できるため、その手順をまとめます。
やりたいこと
こんな感じで、バレーボールのポジションを選択するv-select
だけのコンポーネントを作ります。
(なぜバレーボールなのかは無視してください)
<template>
<v-select
prepend-icon=" mdi-volleyball "
:items="positionList"
label="ポジション"
></v-select>
</template>
<script>
export default {
data() {
return {
positionList: [
'ウィングスパイカー',
'ミドルブロッカー',
'セッター',
'リベロ',
],
}
},
}
</script>
※本来は子コンポーネントで選択された値を親に返すためにv-model
でバインドしたり$emit
を用いた処理を書いたりしないといけないですが、本題から外れるため省略しています。
この入力フォームを開くと以下のように選択リストが展開され、一つのポジションを選択できます。
ここで、v-select
はmultiple
というオプションを与えると複数選択できるフォームになります。
<template>
<v-select
prepend-icon=" mdi-volleyball "
:items="positionList"
label="ポジション"
multiple
></v-select>
</template>
「親Aからこのコンポーネントを呼ぶときは単一選択でよいが親Bから呼ぶときは複数選択したい」ということもあるかと思います。例えば、「私はこのポジションです」という使い方なら単一でよいですが、「経験したことがあるポジション」を選択するときは、複数選択したいでしょう。
このmultiple
を、親コンポーネントから切り替えます。
propsでBoolean値を渡す
このmultiple
、Vuetify公式を見るとBoolean型でコントロールされていることがわかります。
したがって、multiple
を何らかのBoolean型の変数でバインドし、かつその変数を親から与えることで、マルチとシングルを切り替えることができそうです。
よって、親・子のコードは以下の通りになります。
<position-selecer> </position-selecer>
<position-selecer
:multiple-flg="true"
>
</position-selecer>
<template>
<v-select
prepend-icon=" mdi-volleyball "
:items="positionList"
label="ポジション"
:multiple="multipleFlg"
></v-select>
</template>
<script>
export default {
props: {
multipleFlg: {
type: Boolean,
default: false,
},
},
data() {
return {
positionList: [
'ウィングスパイカー',
'ミドルブロッカー',
'セッター',
'リベロ',
],
}
},
}
</script>
まず、子のv-select
のmultiple
を任意のBoolean型の変数にバインドします。これを親から受け取りたいのでpropsに指定するのですが、普通に記述するだけだと子はすべてString型として受け取ってしまい、true/falseとして解釈できません。これは、propsをオブジェクト形式で記述し、type
をBoolean
と指定することで解決します。
また、今回は明示的な指定があったときだけマルチにしたいので、デフォルト値をfalseにしています。
次に親側の記述についてです。
上述のとおり子のデフォルトはmultiple: false
であるため、何もしなければシングルで表示されます。なので親Aは特に何か指定する必要はありません。
他方、親Bはマルチで呼びたいためmultiple-flg
にtrue
を設定しています。このとき、普通は静的な値をpropsで渡す際に:multiple
のようにバインドする必要はないのですが、今回のように子がオブジェクト形式で型を指定してpropsを受け取るような場合は、バインドした状態で渡す必要があります。(特にscript部で何かする必要はなく、template部で形式的にバインドするだけOKです)
以上のようにすることで、親からの呼び出しに応じて子のオプションを切り替えて使うことができました!
細かいデザイン的な要素も親から与えることで決定できるため、子コンポーネントの再利用性が高まると思います。
参考
Author And Source
この問題について(子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify]), 我々は、より多くの情報をここで見つけました https://qiita.com/aki4003/items/fdccca29648a34add3b9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .