why

仕事で必要になったから。

最小限でフォームとして必要な機能が揃っているものを作る。

todo -- この記事でやること

Vuetify のセレクトボックス作成ツールである v-select の使い方の説明

初期のセット

v-selct

フォーム周りで一番よく使う。選択肢。

vuetifyjs.com

基本的に data に定義してある選択肢をとって、v-model で送る。

kei-s-lifehack.hatenablog.com

選択肢の items と v-model はこの記事でも扱った。

最も簡単な形

  data: () => {
    return {
      items: [1,2,3,],
    }
  }

こうやって js 側の data に選択肢の元になる配列を定義する

<v-select 
  :items=items>
</v-select>

html 側で v-select を呼び出して、選択肢の元になる配列を読み込む

f:id:kei_s_lifehack:20210730111819p:plain

するとこれだけでセレクトボックス（プルダウン）が作成できる

しかし、これでは

（だいたいはそうなるであろう）初期値がなく、手間
まずい組み合わせを選んで送信できてしまう

などの不便な点があるので、そこを工夫して作る必要がある

outlined

f:id:kei_s_lifehack:20210730112227p:plain

outlined を付け足すだけで、周りが線で囲われたスタイルにできる。手軽すぎる。

選択肢の初期値を作る

  data: () => {
    return {
      message : 'This is  App data message',
      items: [1,2,3,],
      item_status: 0,
    }
  },

data に items とは別に現在の item の状態、item_status を書く。

  created() {
    this.item_status = 1;
  }

そして最初に DOM の前の値周りが作成された時に、その値を 1 にする

<v-select 
  v-model="item_status"
  :items=items
  outlined
  >
</v-select>

そして html の v-select の v-model に item_status という状態をリンクさせる

これが双方向 binding というらしい。

f:id:kei_s_lifehack:20210730115150p:plain

これで最初に選択肢が入っているセレクトボックスを作ることができる。

紐づくものが変化した時の初期値はまた追加処理が必要

ただし、これが何かに基づいているフォームだった場合、その基づいているものが変わった時には created は走らないので、その基づいているものの変化時に動かす関数に、item_status を 1 にする処理を書く必要がある。

関連する選択肢の無効化

disabled をつけて無効化

vuetifyjs.com

diabled の引数を入れるとその v-select は使えなくなる。非活性化。

<v-select 
  v-model="item_status"
  :items=items
  outlined
  >
</v-select>
<v-select 
  v-model="sub_item_status"
  :items=sub_items
  outlined
  disabled
  >
</v-select>

disabled の値を付け加えた方は無効化されている。

またこれは引数に単純に追加するだけではなく v-bind の :disabled で

<v-select 
  v-model="sub_item_status"
  :items=sub_items
  :disabled=false
  >
</v-select>

と、論理値を渡すことができる。無効化 disabled がウソ false なので

f:id:kei_s_lifehack:20210731185558p:plain

この場合は select box が使える。これが true だと

f:id:kei_s_lifehack:20210731185752p:plain

クリックしても反応せず、使えない。

これを利用して v-model の値をwatch すれば

親要素の選択肢がなしなら関連する子要素は表示しないように..といったこともできる

  data: () => {
    return {
      isSubItemStatusDisable: false,
    }
  },

data に sub item の状態が無効化されている、という変数を定義して

<v-select 
  :disabled=isSubItemStatusDisable
  >

それを html 側の :disabled の値にセット

  watch: {
    item_status: function(newValue) {
      console.log(newValue);
      if(this.item_status === 0)
        this.isSubItemStatusDisable = true;
      else
        this.isSubItemStatusDisable = false;
    }
  },