vue単一ファイルコンポーネントでのjqueryの使い方

Question

https://qiita.com/MariMurotani/items/5fbea5942d2edf149989

↑上を参考にvueの勉強をしています...

router-viewのルートに配置されたコンポーネントでjqueryを使いたいです

//Scene1.vue

<template>
  <div class="Scene1" id="Scene1">
    <div @click="goFooter">下へ</div>

　　<div class="contents"></div>

    <div class="footer" id="footer">あいう</div>
  </div>
</template>

<script>

//import { $ } from "jquery" ←　こうじゃなくて

import jQuery from "jquery"  
global.$ = jQuery  //このようにする


export default {
  name: 'Scene1',
  methods:{
      showMessage: function(){alert(this.msg)},
      goFooter: function(){
        $("#Scene1").scrollTop($("#footer").scrollTop());
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.Scene1{
  background: gray;
  width: 100vw;
  //height: 200vh;
  height: 10vh;
  //position: relative;
  overflow: scroll;
}

.contents{
  width: 5vw;
  height: 100vh;
  background: white;
}

.footer{
  //position: absolute;
  //bottom: 0px;
}

</style>

「下へ」をクリックすると

Uncaught TypeError: Object(...) is not a function
at VueComponent.goFooter (Scene1.vue?584a:33)
at invoker (vue.esm.js?efeb:2027)
at HTMLDivElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

とエラーが出てしまい、下へスクロールしてくれません...
調べてみたのですが分からなくて(T___T)

上のshowMessageなどは動きます

どうすればいいのでしょうか

Answer 1

scrollTopを検証しづらい状態だったので、追記で変更しました。

そして
import { $ } from "jquery"

を

import jQuery from "jquery"
global.$ = jQuery

このようにしたらできました。

理屈分かる方いらっしゃいましたら良かったら教えてください

Answer 2

Uncaught TypeError: Object(...) is not a function

こちらは、showMessage: function(){alert(this.msg)}ここの最後に,カンマがないからだと思います。
,を入れればエラーはなくなるかと。

その上で、動くか動かないかですが、私が試した限りでは動きませんでしたので、下記のように書き換えたら動きました。
ただ、私もvue.jsに関しては勉強中の身であり、結果として中途半端な回答で申し訳ありません。

書き換えて試したコード↓

var app = new Vue({
  el: '#app',
  name: 'Scene1',
  methods:{
    showMessage: function(){alert(this.msg)},
    goFooter: function(){
      $('html, body').animate({ scrollTop: $("#footer").offset().top }, 1000);
    }
  }
});

<div id="app">
  <div class="Scene1" id="Scene1">
    <div @click="goFooter">下へ</div>
    <div class="footer" id="footer">あいう</div>
  </div>
</div>

Comments

[退会済みユーザー]

回答ありがとうございます。
カンマは質問につけ忘れてました...
カンマありでも同じエラーが出てしまいます
shouta-haruran様のコードは単一ファイルコンポーネントではない感じですか?

[souta-haruran]

確かにそうですね。
私が書いたのは単一ファイルコンポーネントではないですね。
全く参考にしていただける回答ではありませんでしたね。
大変失礼しました。
私なりにもう一度見直し、解決前に間に合えばこちらへ追記させていただきます。

[souta-haruran]

私なりに試し、その後模索してみましたがお力になれそうにありませんでした。
中途半端な回答となってしまい大変申し訳ありませんでした。

試したことと、結果だけお伝えいたします。

単一ファイルコンポーネントで試してみました。（今やってるPJTのファイルに組み込んでみました）
nihcika様のコードをそのまま組み込んだところ、エラーは発生せず問題なく動いたことを確認できました。
（ただ、当PJTではjQueryを使用しない作りなのでJavaScriptのscrollTo()に書き換えました）

[退会済みユーザー]

とんでもないです、なんだか申し訳ないです
ありがとうございます

window.scrollTo()ではできるみたいですね
こちらでも確認させていただきました、ありがとうございます