BootstrapVueのテーブルにリンクを埋め込む方法

BootstrapVueのテーブルb-tableタグにリンクを埋め込む方法です。

#完成品
<img width="1179" alt="スクリーンショット 2020-01-10 23.24.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99046/77452ca5-b8d8-daaa-5ab0-f9bff2b00730.png">

```Vue

<b-table  :items="items3">
      <template v-slot:cell(link)="data">
        <router-link to="/work">
          <a href="#" v-on:click="openLinkInNewTab(data.value.url)">{{ data.value.name}}</a>
        </router-link>
      </template>
    </b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  },
  methods: {
    openLinkInNewTab (url) {
      window.open(url, '_blank')
    },
  }
}
</script>
```



#b-tableの基本
<img width="1149" alt="スクリーンショット 2020-01-10 23.28.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99046/ddd7c64c-b6f5-f496-4b3e-c4b2b781c4ad.png">

```vue
<b-table  :items="items1">
</b-table>


<script>
export default {
  data: function () {
    return {
      items1: [
        {
          name: 'hoge',
          msg:  'hogeメッセージです'
        },
        {
          name: 'fuga',
          msg:  'fugaメッセージです'
        }
      ]
    }
  }
}
</script>
```
簡単なb-tableタグの使い方です。

`テーブルの部分<b-table  :items="items1">は<b-table  v-bind:items="items1">の省略記法です。`

#とりあえずリンクを埋め込む
<img width="1023" alt="スクリーンショット 2020-01-10 23.36.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99046/c04d8967-d032-ee3f-2ca6-676ec10ed192.png">


```Vue

<b-table  :items="items2">
  <template v-slot:cell(url)="data">
    <a :href="data.value" >{{ data.value}}</a>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items2: [
        { 
          url: 'https://www.google.com/',
          msg: 'googleへのリンクです'
         },
        { 
          url: 'https://www.yahoo.co.jp/',
          msg: 'yahooへのリンクです'
         }
      ]
    }
  }
}
</script>

```

この時`<template v-slot:cell(url)="data">`はテーブルのurlカラムのセルにdataを紐付けるようである。dataとは何かというとitemsの配列の要素一つ一つのことを指すようである。
`{{ data.value}}`を`{{ data}}`に変更すると下の通り、dataの構造がわかる。

```json
{
	"item": {
		"url": "https://www.google.com/",
		"msg": "googleへのリンクです"
	},
	"index": 0,
	"field": {
		"key": "url",
		"label": "Url"
	},
	"unformatted": "https://www.google.com/",
	"value": "https://www.google.com/",
	"detailsShowing": false,
	"rowSelected": false
}
```

そのため先程のコードを下記のとおりに変更しても同様の挙動をする

```
<b-table  :items="items2">
  <template v-slot:cell(url)="{item}">
    <a :href="item.url" >{{ item.url}}</a>
  </template>
</b-table>

```

#リンクの表示名を変更する

<img width="1002" alt="スクリーンショット 2020-01-11 0.30.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99046/157b3bad-5439-e796-857e-4a9a70fab1d7.png">

```vue
<b-table  :items="items3">
  <template v-slot:cell(link)="data">
    <a :href="data.value.url" >{{ data.value.name}}</a>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  }
}
</script>
```
先程の状態からitemsに紐付ける配列の構造を少し変更するだけで簡単にaタグの表示名を変更できる。

#リンク先を新しいタブで開く
先ほどと画面の見た目は変わらないが、リンクをクッリクした際に新しいタブで表示する。

```vue
<b-table  :items="items3">
  <template v-slot:cell(link)="data">
    <router-link to="/hoge">
      <a href="#" v-on:click="openLinkInNewTab(data.value.url)">{{ data.value.name}}</a>
    </router-link>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  },
  methods: {
    openLinkInNewTab (url) {
      window.open(url, '_blank')
    },
  }
}
</script>
```
この際`<router-link to="/hoge">`を使用しないと`href="#"`のせいで、もとのタブは別画面に遷移してしまう


#参考
- https://stackoverflow.com/questions/58474034/how-to-get-item-value-in-v-slotcell-template-of-b-table-bootstrapvue