jquery - 如何在 Laravel 框架的 Vue 组件中使用 jquery 插件？

Question

我正在使用 Laravel 开发我的网站。我从主题森林购买了一个模板。我网站上有一个登录面板。我在那个面板中使用 vue js。我正在使用我购买的模板。问题是模板的所有组件都在 jquery 中，所以我无法在我的 vue 组件中使用它们。例如，我在模板中有一个自定义数据表。我想在我的组件中使用相同的设计。数据表未在 vue 组件中初始化。请让我知道该怎么做。我不想使用 vue 插件，我只想让模板的 jquery 插件在我的 vue 组件中工作。请帮我。下面我列出了 Laravel 刀片文件代码以及我想在其中使用自定义数据表的产品 vue 组件。

Laravel 刀片文件代码

@extends('frontend.shop.layouts.app')

@section('breadcrumb')
  <div class="content-header-left col-md-9 col-12 mb-2">
    <div class="row breadcrumbs-top">
      <div class="col-12">
        <h2 class="content-header-title float-left mb-0">{{ $page_name }}</h2>
        <div class="breadcrumb-wrapper col-12">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('shophome') }}/dashboard">Home</a></li>
            <li class="breadcrumb-item">{{ $parent_page }}</li>
            <li class="breadcrumb-item active">{{ $page_name }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <section>
    <div id="app">
      @if($original_page_name=='products')
        <product-page></product-page>
      @elseif($original_page_name=='commission')
        <commission-page></commission-page>
      @endif
    </div>
  </section>
@endsection

@section('pagecss')
  @if($original_page_name=='products')
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/vendors/css/tables/datatable/datatables.min.css') }}?v={{ time() }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/css/pages/data-list-view.css') }}?v={{ time() }}">
  <style>
    .product_page_btn {
      padding:7px 10px;
      margin-right: 3px;
      border-radius: 3px;
      font-size: 13px;
    }
  </style>
  @endif
@endsection

@section('pagescripts')
  @if($original_page_name=='products')
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}?v={{ time() }}"></script>-->
    <script src="{{ asset('public/js/productsapp.js') }}?v={{ time() }}"></script>
  @elseif($original_page_name=='commission')
    <script src="{{ asset('public/js/commission.js') }}?v={{ time() }}"></script>
  @endif
@endsection

** 产品页面 Vue 组件代码**

<template>
  <div class="card px-2">
    <div class="card-body">

      <!--Top Buttons-->
      <div class="mb-1" v-if="buttons_show">
        <div class="row">
          <div class="col-md-12">
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light" v-on:click="{ buttons_show = !buttons_show, search_product_show = !search_product_show, manage_products_show = !manage_products_show }"><i class="fa fa-plus"></i> Add Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-upload"></i> Import Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-list-alt"></i> Product SKU Wise Report</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-download"></i> Download SKU Sheet</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-clipboard"></i> Download Product Format</button>
          </div>
        </div>
      </div>

      <!--Manage Products-->
      <section id="data-list-view" class="data-list-view-header manage_products" v-if="manage_products_show">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>
        <!-- DataTable starts -->
        <div class="table-responsive">
            <vue-good-table
              mode="remote"
              @on-page-change="onPageChange"
              @on-sort-change="onSortChange"
              @on-column-filter="onColumnFilter"
              @on-per-page-change="onPerPageChange"
              :totalRows="totalRecords"
              :isLoading.sync="isLoading"
              :line-numbers="true"
              :pagination-options="{
                enabled: true,
              }"
              :rows="rows"
              :columns="columns"
              :line-numbers="true">
            </vue-good-table>
        </div>
        <!-- DataTable ends -->
      </section>

      <!--Search Products-->
      <div class="mb-2 search_product" v-if="search_product_show">
        <div class="mb-1">
          <div class="row">
            <div class="col-md-2">
              <h4 style="font-size: 1.20rem;">Search Product</h4>
            </div>
            <div class="col-md-10">
              <autocomplete></autocomplete>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <h4 style="font-size: 1.20rem;">OR</h4>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <p>
                Skip this Step. Move to <button type="button" class="btn btn-success product_page_btn"><i class="fa fa-plus"></i> Add New</button>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!--Add Old Products-->
      <section id="data-list-view" class="data-list-view-header add_old_product d-none">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>

        <!-- DataTable starts -->
        <div class="table-responsive">

        </div>
        <!-- DataTable ends -->

      </section>

      <!--Add Products-->
      <div class="mb-2 add_product" v-if="addproduct_show">

      </div>

    </div>
  </div>
</template>

<script>

import axios from 'axios'
import route from 'ziggy';
import { Ziggy } from '../../../ziggy';
import Autocomplete from './Autocomplete.vue';
import SellerProductsLoad from './SellerProductsLoad.vue';
import { VueGoodTable } from 'vue-good-table';

window.Ziggy = Ziggy;

export default {
  components: {
    Autocomplete,
    SellerProductsLoad,
    VueGoodTable
  },
  data() {
    return {
      isLoading: false,
      columns: [
        'sku',
        'product_name',
        'category',
        'selling_price',
        'is_sub_approved',
        'action'
      ],
      rows: [],
      totalRecords: 0,
      serverParams: {
      columnFilters: {
        },
        sort: {
          field: '',
          type: '',
        },
        page: 1,
        perPage: 10
      }
    }
  },
  mounted() {

  },
  methods: {

    updateParams(newProps) {
      this.serverParams = Object.assign({}, this.serverParams, newProps);
    },

    onPageChange(params) {
      this.updateParams({page: params.currentPage});
      this.loadItems();
    },

    onPerPageChange(params) {
      this.updateParams({perPage: params.currentPerPage});
      this.loadItems();
    },

    onSortChange(params) {
      this.updateParams({
        sort: [{
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        }],
      });
      this.loadItems();
    },

    onColumnFilter(params) {
      this.updateParams(params);
      this.loadItems();
    },
    loadItems() {
      getFromServer(this.serverParams).then(response => {
         this.totalRecords = response.totalRecords;
         this.rows = response.rows;
      });
    }


  }
}
</script>

标签： jquerylaravelvue.jsjquery-uivuejs2