Как подключить jquery в vue компонент?

Question

[IIITRIX]

Мой компонент

<template>
  <div>Шапка</div>
</template>
<script>
import cookies from 'js-cookie'
export default {
	name: 'navigation',
	props: ['backend'],
	data() {
		return {
			isLogin: !!cookies.get('user')
		}
	},
	methods: {
		login() {
			this.$store.commit('global/showLoginModal', true)
		},
		search(e) {
			var qs = e.target.value
			if (qs === '') {
				return false
			}
			this.$router.replace('/search/' + qs)
		}
	}
}
</script>

Нужно добавить в него

var searchBar = $(".search"),
	searchInput = searchBar.find("input"),
	searchToggleBtn = $(".search-toggle"),
	searchParent = $("header_content");
searchInput.on("focus", function() {
	searchBar.addClass("expanded")
}), searchInput.on("blur", function() {
	$(this).val() || searchBar.removeClass("expanded")
}), searchToggleBtn.on("click", function() {
	$(this).toggleClass("active"), searchParent.toggleClass("search"), searchBar.toggleClass("visible"), searchInput.focus()
});

Answer 1

[Виктор Евгеньев]

Подтяни его на lifecycle hook mounted().
Статья об этом

Answer 2

[Alexander Pushkarev]

Не нужен вам jQuery, тянуть столько ненужного кода.

Вроде как должно работать

let searchBar       = document.querySelector('.search'),
    searchInput     = searchBar.querySelector('input'),
    searchToggleBtn = document.querySelector('.search-toggle'),
    searchParent    = document.querySelector('.header_content');

searchInput.addEventListener('focus', function (event) {
    searchBar.classList.add('expanded');
});
searchInput.addEventListener('blur', function (event) {
    searchInput.value || searchBar.classList.remove('expanded');
});
searchToggleBtn.addEventListener('click', function (event) {
    searchToggleBtn.classList.toggle('active');
    searchParent.classList.toggle('search');
    searchBar.classList.toggle('visible');
    searchInput.focus();
});

Comments

[IIITRIX]

Ошибка ReferenceError: document is not defined

[Игорь]

Поддерживаю, работает.
Для пару троек функций не стоит тянуть jQuery

Answer 3

[Владимир Мальков]

Как вариант, так:

import JQuery from 'jquery'
let $ = JQuery

А вообще это довольно избыточно, тащить еще и jquery. Советую переписать код на ecma, он даже по размеру такой же будет, а работать это все будет гораздо быстрее.

Comments

[IIITRIX]

Выдает ошибку
Error: jQuery requires a window with a document