How to put normal Javascript into VueJS

Question

I am literally just trying to implement into a vuejs component. Can anyone help with on where to put the JavaScript so that it'll work? I'm new to vuejs and I'm still not sure how to set everything up in the script section so that it'll work.

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: '002円B';
	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>

Thanks!

• mplungjan: Why not a native accordion? scotch.io/courses/getting-started-with-vue/…
• niclas_4: You should put Code like the EventListeners etc in the Mounted vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks but be aware that most of the stuff you could do like that is already done in nativ vue components that you can use, for example accordion

Answer 1

You can put regular javascript in the script tag of your Vue component. It will execute just the same way a regular app.js file would execute.

Answer 2

Since you're trying to learn Vue I'd suggest you look into how to achieve your desired functionality with Vues own toolset instead of using native JS event handlers, document selects etc.

You can easily add event listeners for most common events with the v-on: directive (or @ for short):

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

You can refer to other elements via the ref property which is then available in the Vue component under this.$refs:

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

and in your myClickHandler method:

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

This would be "the Vue way" of tackling your problem - which once you get used to it is really awesome and simple compared to native JS dom selections, eventlisteners etc.

I'd suggest you look more into how to achieve this via Vues tools instead of trying to force native JS and foregoing all of Vues simplicity.