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: '\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>

Thanks!

Why not a native accordion? scotch.io/courses/getting-started-with-vue/… — mplungjan
– mplungjan, Commented Nov 7, 2018 at 7:15
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 — niclas_4
– niclas_4, Commented Nov 7, 2018 at 7:22

Babakar Diop · Accepted Answer · 2018-11-07 14:27:01Z

2

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.

answered Nov 7, 2018 at 14:27

Babakar Diop

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TommyF · Accepted Answer · 2018-11-07 07:30:42Z

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.

Collectives™ on Stack Overflow

How to put normal Javascript into VueJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related