I attempted to utilize 'getelementbyclassname' within VUE methods.
My reason for doing so is that
instead of applying information using :style,
I would like to adjust the width of the div where I applied my class
named 'classon'.
If I were to link the style directly to the div, it wouldn't allow for interactivity.
Therefore, in order to achieve a level of interactivity, I must access the DOM within VUE.
How can I access DOM element information in VUE?
More specifically, this part does not function as expected
methods: {
growit(){
let vueele=this.$el
vueele.getElementsByClassName('classon').style.width='300px'
},
The complete code is displayed below.
-HTML-
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Start the Effect with the Button.
The Effect should alternate the "highlight" or "shrink" class
on each new setInterval tick
(attach respective
class to the div
with id "effect" below) -->
<div>
...
</div>
<script src='./app.js'></script>
<style>
...
</style>
-JS-
new Vue({
el: '#exercise',
data: {
classboolean:true,
...
},
methods: {
growit(){
let vueele=this.$el
vueele.getElementsByClassName('classon').style.width='300px'
},
startEffect() {
this.classboolean=!this.classboolean
},
startProgress(){
...
},
}
});
Your support is always greatly appreciated.