LaravelでWEB開発 - 2.VueとjQueryの共存

<script>タグ内で jqueryを importし、 mounted() メソッドに処理を書けばOK。

Vueのンストール

Vueインストール

$ npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
+ vue@2.6.11
added 1 package from 1 contributor and audited 1 package in 0.598s
found 0 vulnerabilities

jQueryのインポートと利用

.vueファイル修正

$ vi resources/js/components/Sample.vue

<table>の <thead>を固定させるスクリプトを jQueryで実装。

<template>
<div>
<p v-if="errored">{{ error }}</p>
<p v-if="loading">Loading...</p>
・
・
</div>
</template>
<script>
import $ from "jquery";
export default{
  data() {
    return {
      loading: true,
      errored: false,
      error: false,
  },
  mounted() {
    $(function () {
      var _window = $(window);
      $('.area1').css('color','red');
      var bottom;
        _window.on('scroll',function(){
          bottom = $('.vgt-global-search').height() + 50 + $('header').height();
          if(_window.scrollTop() > bottom){
            $('thead').css('position','fixed').css('top','0');
          }
          else{
            $('thead').css('position','static');
          }
        });
      _window.trigger('scroll');
    });
  }
};
</script>