Как поставить нормальный Javascript в VueJS

Question

Я буквально просто пытаюсь реализовать компонент vuejs. Может кто-нибудь помочь с тем, где поставить JavaScript, чтобы он работал? Я новичок в vuejs и до сих пор не знаю, как все настроить в разделе скриптов, чтобы оно работало.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
	acc[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var panel = this.nextElementSibling;
		if (panel.style.maxHeight){
			panel.style.maxHeight = null;
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
		} 
	});
}

.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
}

.active, .accordion:hover {
	background-color: #ccc;
}

.accordion:after {
	content: '\002B';
	color: #777;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

.active:after {
	content: "\2212";
}

.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

<h2>Accordion with symbols</h2>

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Спасибо!

Answer 1

Вы можете поместить обычный javascript в тег script вашего компонента Vue. Он будет выполняться точно так же, как и обычный файл app.js.

Answer 2

Поскольку вы пытаетесь изучить Vue, я бы посоветовал вам изучить, как добиться желаемой функциональности с помощью собственного набора инструментов Vues вместо использования собственных обработчиков событий JS, выбора документов и т. Д.

Вы можете легко добавить прослушиватели событий для наиболее распространенных событий с помощью директивы v-on: (или @ для краткости):

<button class="accordion" @click="myClickHandler">Section 1</button>

Вы можете ссылаться на другие элементы через свойство ref, которое затем доступно в компоненте Vue в this.$refs:

<div class="panel" ref="myPanel">...

и в вашем myClickHandler методе:

methods: {
  myClickHandler() {
    let panel = this.$refs.myPanel
    ... do stuff ....
  }
}

Это был бы "Vue-способ" решения вашей проблемы - который, как только вы привыкнете к нему, действительно удивителен и прост по сравнению с исходным выбором JS-dom, списком событий и т. Д.

Я бы посоветовал вам больше взглянуть на то, как этого добиться с помощью инструментов Vues, ​​вместо того, чтобы пытаться форсировать нативный JS и отказаться от всей простоты Vues.