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範囲が表示されます。

-
前の記事
Nuxt.js link-prevueを使用して指定したURLのサイトプレビューを表示する 2020.02.27
-
次の記事
JavaScript 小数点以下を四捨五入・切り捨て・切り上げする方法 2020.02.27
コメントを書く