技術とか戦略とか

SIerで証券レガシーシステムを8年いじってからSESに転職した業務系エンジニアによる技術ブログ。

Vue.js:プルダウンの選択値を動的に変更する

画面の各項目で設定された値に応じて、プルダウンの選択値(初期値)を動的に変更したい場合があります。
 
Vue.jsの場合、これは、値の状態を監視するウォッチャー(watch)と双方向データバインディング(v-model)を併用することで実現できます。
画面の各項目の設定値をwatchで監視し、監視結果として返す値(プルダウンの選択値)をv-modelでバインディングさせる、という形で実装します。
 
以下、サンプルコードです。
 
【サンプルコード】
・test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js - Test</title>
</head>
<body>

<div id="app">
  <input type="checkbox" v-model="checked">
  <select v-model="selected">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
  </select>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  var app = new Vue({
    el: '#app',
    // 変数の初期値定義
    data: {
      checked: false,
      selected: ''
    },
    // 変数の値を監視するイベントを定義
    watch: {
      checked: function(newVal, oldVal) {
        this.selected = (newVal) ? 'item2' : '';
      }
    }
  })
</script>
</body>
</html>
 
【実行結果】
チェックボックスをチェックしないとプルダウンの選択値が空白、チェックすると"item2"になります。

f:id:akira2kun:20220118003618j:plain

f:id:akira2kun:20220118003630j:plain

もちろん、プルダウンの選択値を変更することも可能です。

f:id:akira2kun:20220118003650j:plain