I tried to use 'getelementbyclassname' in VUE methods.
The reason why I tried to use this is that
instead of attaching information as :style,
I want to change the width of the div I applied my class
which is 'classon'.
If I tie the style to the div, it wouldn't be interactive.
So to achieve interactivity, I need to access to the DOM within VUE.
What shoudl I do if I want to access to the DOM element information in VUE?
Specifically, this part doesn't work
methods: {
growit(){
let vueele=this.$el
vueele.getElementsByClassName('classon').style.width='300px'
},
Full code is as 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>
<button @click="startEffect">Start Effect</button>
<div id="effect" :class='{"highlight":classboolean, "shrink":!classboolean}'></div>
</div>
<!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
<div :style=[fclass,sclass]>I got no class :( but i think i just got it</div>
<!-- 3) Let the user enter a class (create some example classes) and attach it -->
<div>
<label>Custom Class</label>
<input type="text" v-model='newclass'>
<div :style='this[newclass]'>{{newclass}}</div><br><br>
</div>
<!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
<div>
<label>type another class</label>
<input type="text" v-model='anotherclass'><br>
<label>type true false for that</label>
<input type="text" v-model='booleans'>
<div :class='{"anotherclass":booleans}'>can't figure out this</div>
</div>
<!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles. -->
<div>
<input type="text">
<div></div>
</div>
<!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
<div>
<label>What Rectangle do you want to grow?</label>
<textarea v-model='rectselection'></textarea>
<button @click="startProgress">Start Progress</button>
<button class="btn-primary" @click='growit'>grow</button>
<div class='options' :class='{classon:boolean1}'>{{rectselection}}</div>
<div class='options' :class='{classon:boolean2}'>{{rectselection}}</div>
<div class='options' :class='{classon:boolean3}'>{{rectselection}}</div>
<div class='options' :class='{classon:boolean4}'>{{rectselection}}</div>
<div class='options' :class='{classon:boolean5}'>{{rectselection}}</div>
</div>
</div>
<script src='./app.js'></script>
<style>
.highlight{
background-color:yellow;
border:solid black 1px;
box-shadow:1px 2px 1px 1px;
height:150px;
width:150px;
}
.shrink{
background-color:rgb(255, 255, 137);
border:dashed grey 0.5px;
box-shadow:0px;
height:150px;
width:50px;
}
.options{
border:rgba(0, 0, 0, 0.564) solid 0.2px;
width:200px;
height:50px;
margin:10px;
display:block;
}
.classon{
box-shadow: aquamarine 2px 2px;
background-color: red;
}
</style>
-JS-
new Vue({
el: '#exercise',
data: {
classboolean:true,
fclass:{
'background-color':"red"
},
sclass:{
'box-shadow':"grey 2px 2px 2px 2px",
'margin':'50px',
},
newclass:'',
anotherclass:'',
booleans:'',
width:'',
rectselection:'',
boolean1:false,
boolean2:false,
boolean3:false,
boolean4:false,
boolean5:false,
},
methods: {
growit(){
let vueele=this.$el
vueele.getElementsByClassName('classon').style.width='300px'
},
startEffect() {
this.classboolean=!this.classboolean
},
startProgress(){
console.log
if(this.rectselection==1){
this.boolean1=true;
this.boolean2=false; this.boolean3=false; this.boolean4=false; this.boolean5=false;
}
else if(this.rectselection==2){
this.boolean2=true;
this.boolean1=false; this.boolean3=false; this.boolean4=false; this.boolean5=false;
}
else if(this.rectselection==3){
this.boolean3=true;
this.boolean1=false; this.boolean2=false; this.boolean4=false; this.boolean5=false;
}
else if(this.rectselection==4){
this.boolean4=true;
this.boolean1=false; this.boolean2=false; this.boolean3=false; this.boolean4=false;
}
else if(this.rectselection==5){
this.boolean5=true;
this.boolean2=false; this.boolean3=false; this.boolean4=false; this.boolean1=false;
}
},
}
});
Really Appreciate always.
