【BootstrapVue】tableでクリックされたレコードの値を取得する

2458 ワード
bootstrapVue Vue.js Bootstrap Bootstrap テキストリンク

はじめに

Vue.js + Bootstrapのtableのレコードの値を取得する方法のメモです。
初めての投稿となるので、日本語がおかしいかもですが、誰かの役に立てれば幸いです。

やりたいこと

以下の画像はBootstrapVueのTables Componentを利用して作成したテーブルです。
今回は、テーブルの中の佐藤 健さんのレコードをクリックした時に、レコードの値を取得します。

以下がコードです。ちょっとだけ解説します。

<b-table>はBootstrapのテーブル形式でデータを表示するためのコンポーネントです。
:itemsにソースデータの配列を渡してあげると、よしなにしてくれます。(めっちゃ楽)

<template>
  <div>
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 20, first_name: '太郎', last_name: '田中' },
          { age: 31, first_name: '健', last_name: '佐藤' },
          { age: 45, first_name: '花子', last_name: '山田' },
          { age: 60, first_name: '謙', last_name: '渡辺' }
        ]
      }
    }
  }
</script>

実装

row-clicked イベントリスナーでレコードの値を受け取れるみたいです。また、itemsに対する配列のインデックスを、任意の2つ目の引数として受け取れるらしい。

<template>
  <div>
    <b-table striped hover :items="items" @row-clicked="row"></b-table>　// 変更
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { age: 20, first_name: "太郎", last_name: "田中" },
        { age: 31, first_name: "健", last_name: "佐藤" },
        { age: 45, first_name: "花子", last_name: "山田" },
        { age: 60, first_name: "謙", last_name: "渡辺" }
      ]
    };
  },
  methods: {　          //追記
    row(record) {
      console.log(record);
    }
  }
};
</script>

結果

以下は佐藤 健さんのレコードをクリックした時の結果です。

Object {age: 31, first_name: "健", last_name: "佐藤"}

レコードの値を受け取ることができました。

参考