物料设计组件滚动选项卡不滚动

Question

我在vue.js应用程序中使用了mdc-tab-scroller。我希望具有“滚动标签”部分下here中的滚动行为。尝试过不同的方法，但不知道如何使其工作。这是我第一次接触vue.js和材料设计组件，因此真的不知道我是否在正确的实现道路上。

    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">
                <mdc-tab-bar>
                    <mdc-tab :to="{ path: getTab1() }" >Tab1</mdc-tab>
                    <mdc-tab :to="{ path: getTab2() }" >Tab2</mdc-tab>
                    <mdc-tab :to="{ path: getTab3() }" >Tab3</mdc-tab>
                    <mdc-tab :to="{ path: getTab4() }" >Tab4</mdc-tab>
                    <mdc-tab :to="{ path: getTab5() }" >Tab5</mdc-tab>
                    <mdc-tab :to="{ path: getTab6() }" >Tab6</mdc-tab>
                </mdc-tab-bar> 
            </div>
        </div>
    </div>