BootstrapのカードとVue-routerの併用について

Question

前提・実現したいこと

Bootstrapとvue-routerを併用してリンク付きのカードを作成したいと考えています．
しかし，card-groupのレイアウトが崩れてしまいます．

該当のソースコード

<div class="card-group">
    <router-link :to="{ name: "hogehoge" }">
        <div class="card">
            <img class="card-img-top" :src="'/images/hoge.jpg'" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">
                    {{ content }}
                </p>
            </div>
        </div>
    </router-link>
</div>

試したこと

<router-link>をcardクラスの中に設置したところ，card-groupのレイアウトは保存されますが，カード内の文字と画像にしかリンクが貼られず，背景などにはリンクがない状態です．

補足情報（FW/ツールのバージョンなど）

Bootstrap: 4.0
Vue.js: 2.5
vue-router: 3.0

どなたかよろしくお願いします．

Answer 1

vue-routerにタグを設定してみてはどうでしょう？

    <router-link :to="{ name: 'hogehoge' }" tag="div" class="card-group">
        <div class="card">
            <img class="card-img-top" :src="'/images/hoge.jpg'" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">
                    {{ content }}
                </p>
            </div>
        </div>
    </router-link>

Comments

[arw.tyx-out_mz]

できました！ありがとうございます！