@IIITRIX

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

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

<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()
});
  • Вопрос задан
  • 5886 просмотров
Решения вопроса 1
@windsteppy
Trainee разработчик
Подтяни его на lifecycle hook mounted().
Статья об этом
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Не нужен вам 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();
});
Ответ написан
MalkovVladimir73
@MalkovVladimir73
Fullstack (node + vue.js)
Как вариант, так:
import JQuery from 'jquery'
let $ = JQuery

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы