Загрузка функции jquery в vue из внешнего файла
У меня работает django, интегрированный с vuejs через загрузчик webpack. В файле "base.html" django загружаются все статические файлы и есть точка, где рендерится vue. В vue у меня есть страница, где есть таблица, в которую загружаются все данные. В простом html шаблоне таблица и люди были через js файл, который использовал jquery. С vuejs я не могу его загрузить.
В файле base.html:
<body class="vertical-layout vertical-menu-modern navbar-floating footer-static " data-open="click"
data-menu="vertical-menu-modern" data-col="">
<div id="app">
</div>
{% render_bundle 'app' %}
<script src="{% static 'dashboard/js/scripts/pages/app-user-list.js' %}"></script>
</body>
В app-user-list.js:
$(function () {
('use strict');
var dtUserTable = $('.user-list-table'),
newUserSidebar = $('.new-user-modal'),
newUserForm = $('.add-new-user'),
select = $('.select2'),
dtContact = $('.dt-contact'),
statusObj = {
1: { title: 'Pending', class: 'badge-light-warning' },
2: { title: 'Active', class: 'badge-light-success' },
3: { title: 'Inactive', class: 'badge-light-secondary' }
};
// Users List datatable
if (dtUserTable.length) {
dtUserTable.DataTable({
ajax: "http://127.0.0.1:8000/static/dashboard/data/user-list.json", // JSON file to add data
columns: [
other...
Путь в коде, по которому ajax-запросы ведут к файлу со списком пользователей.
Таким образом у меня возникают проблемы с загрузкой, потому что файл загружается один раз, если я захожу через vue на страницу, где он не загружается, вместо этого, если я перезагружаюсь, там да, потому что django запускает все скрипты.
Я хотел решить проблему, загрузив функцию, присутствующую в js-файле в приложении vue, но она капризничает. Я начал с jquery, потом решил с ним проблему и начал еще тысячу других. Нет ли в vue способа загружать внешнюю функцию jquery каждый раз с параметрами для списка пользователей, иначе, если вы можете подсказать мне лучшее решение для этого?