vue.js サイドスクロール(ボタン付き)について

Question

https://codepen.io/mahish/pen/RajmQw

vue.jsにてこのような挙動をするサイドスクロールを実装したいと思っております。
(はみ出た部分はwhite-space: nowrap　で隠しているとします)
条件といたしましては
①はみ出る部分がない場合は、ボタンが表示されない
②はみでる部分がある場合
→右に▶ボタンが表示され、はみ出ている横幅分スクロースする(最大値はcodepenの例でいうとmenu-wrapperの横幅）
→スクロール後に左に◀ボタンが出現

問題点

この際にjqueryだとscrollLeftを使用すればよいのですが、vue.jsだとネットで探しても見つからず、どう実装すればよいか分かりません。

またwhite-space: nowrap; で隠れている部分の横幅のpxの取り方も不明です

よろしくお願いします。

回答を受けての追記

下記のようにしてみましたが、「this.$refs.scrollBox.scrollLeft is not a function」のエラーが出ます。

//子componentからemitでデータを送り <scroll>(←右・左に移動させるためのボタン) 内でイベント発火
<div v-else class="teachers border" id="teachers" ref="scrollBox">
    <ul>
        <li>
            //省略
        </li>
    </ul>
    <scroll @left-button="leftSlide" @right-button="rightSlide"></scroll>
</div>

//js側
leftSlide : function(){
    this.$refs.scrollBox.scrollLeft(300);
},
rightSlide : function () {
    this.$refs.scrollBox.scrollRight(300);
}

Answer 1

スクロールの制御などはvueの機能だけではできないので、どうしても直接DOM elementにアクセスする必要があります。

component化することを考えるとref attributeを用いてelementを参照するのがいいと思います。

ref - API - Vue.js

scrollLeftを表示するだけのベース部分を作ったので参考にしてください。
JSFiddle Demo

Comments

[kazoogon]

回答ありがとうございます。
本文の「回答を受けての追記」に追記させていただきました。
よろしくお願いいたします。

[karamarimo]

jQuery の scrollLeft メソッドと混同していないでしょうか。
raw DOM Element の api としては scrollLeft は function ではなく property です。
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft