Buefy b-selectで@inputイベントでvalueを取得するサンプル

  • 作成日 2020.02.27
  • 更新日 2020.07.21
  • Buefy
Buefy b-selectで@inputイベントでvalueを取得するサンプル

b-selectで生成したoptionのvalueを取得する@inputイベントの簡単な使い方

環境

  • nuxt-buefy 0.3.19

サンプルコード

データは下記のようなデータとなります。

data() {
    return{
        //select選択時に値を取得
        ipadrr: '',
        // 選択データ
        base: [            
            {
                id: '1',
                name: '東京支店',
                ip: '192.168.1.100~244',
            },               
            {
                id: '2',
                name: '大阪支店',
                ip: '192.168.2.100~244',                    
            }
        ]
    }
}

template部のコードです。イメージは各支店で利用しているプライベートIPアドレスのDHCPの範囲をselectした時に表示します。

<b-field label="拠点IP DHCP範囲を確認">
    <b-select placeholder="拠点を選択" icon="earth" @input="input">
        <option
            v-for="option in base"
            :value="option.id"
            :key="option.id">
            {{ option.name }}
        </option>
    </b-select>        
</b-field>
<!-- selectしたデータを表示 -->
<div class="notification">
{{ ipadrr }}
</div>

script部です。idから対象のDHCPの範囲を表示します。

methods: {
    input(val) {
        console.log('selected', val)
        this.ipadrr = this.base[ (val - 1) ].ip           
    }
}

実行結果

選択するとDHCP範囲が表示されます。