link3014 link3015 link3016 link3017 link3018 link3019 link3020 link3021 link3022 link3023 link3024 link3025 link3026 link3027 link3028 link3029 link3030 link3031 link3032 link3033 link3034 link3035 link3036 link3037 link3038 link3039 link3040 link3041 link3042 link3043 link3044 link3045 link3046 link3047 link3048 link3049 link3050 link3051 link3052 link3053 link3054 link3055 link3056 link3057 link3058 link3059 link3060 link3061 link3062 link3063 link3064 link3065 link3066 link3067 link3068 link3069 link3070 link3071 link3072 link3073 link3074 link3075 link3076 link3077 link3078 link3079 link3080 link3081 link3082 link3083 link3084 link3085 link3086 link3087 link3088 link3089 link3090 link3091 link3092 link3093 link3094 link3095 link3096 link3097 link3098 link3099 link3100 link3101 link3102 link3103 link3104 link3105 link3106 link3107 link3108 link3109 link3110 link3111 link3112 link3113 link3114 link3115 link3116 link3117 link3118 link3119 link3120 link3121 link3122 link3123 link3124 link3125 link3126 link3127 link3128 link3129 link3130 link3131 link3132 link3133 link3134 link3135 link3136 link3137 link3138 link3139 link3140 link3141 link3142 link3143 link3144 link3145 link3146 link3147 link3148 link3149 link3150

[Vue.js] classList is undefined for element that has defined classes

when trying to add and remove classes to an element in Vuejs. The missing link in my code is that the classList returns undefined. Why is this? Thanks. when grabbing the element with the jQuery getElementById shorthand $

<template>
<div class=”form-field” id=”outerdiv”>
<div class=”form-field__control”>
<label for=”exampleField” class=”form-field__label”>{fieldLabel}</label>
<input id=”exampleField” v-model=”fieldContent” @blur=”setActive(false, $event)” @focus=”setActive(true, $event)”
type=”text” class=”form-field__input” />
</div>
</div>
</template>

<script>
import $ from “jquery”;

export default {
name: “FormField”,
props: {fieldContent: String, fieldLabel: String},
methods: {
setActive(active, event) {
console.log(“this.fieldContent: “+this.fieldContent);
const formField = event.target.parentNode.parentNode
if (active) {
formField.classList.add(‘form-field–is-active’)
} else {
formField.classList.remove(‘form-field–is-active’)
event.target.value === ‘’ ?
formField.classList.remove(‘form-field–is-filled’) :
formField.classList.add(‘form-field–is-filled’)
}
}
},
updated() {
console.log(“in initialize form field”);
console.log(“this.fieldContent: “+this.fieldContent);
console.log(“result from shorthand getElementById: “+$(“#outerdiv”));
console.log(“classList of element: “+ $(“#outerdiv”).classList);
this.fieldContent === ‘’ ?
$(“#outerdiv”).classList.remove(‘form-field–is-filled’):
$(“#outerdiv”).classList.add(‘form-field–is-filled’)
}
}
</script>

<style>
.form-control{
border-style: none;
width: 100%;
height: 34px;
padding: 0px 0px;
font-size: 20px;
}
</style>

Solution :

While the main issue has been resolved you can simplify the code and at the same time eliminate the need for jQuery by doing it the vue.js way.

By using class bindings you can replace the ifs with a computed prop and if you need direct access to an element you can use refs.

Just run the following snippet to see these concepts in action:

new Vue({
el: ‘#app’,
data: {
fieldContent: ‘’,
fieldLabel: ‘’,
active: false,
},
computed: {
classList() {
return {
‘form-field–is-filled’: this.fieldContent !== ‘’,
‘form-field–is-active’: this.active,
};
}
},
methods: {
setActive(active, event) {
console.log(“this.fieldContent: “+this.fieldContent);

this.active = active;
}
},
updated() {
console.log(“in initialize form field”);
console.log(“this.fieldContent: “+this.fieldContent);
console.log(“result from shorthand getElementById: “, this.$refs.outerDiv);
console.log(“classList of element: “+ this.$refs.outerDiv.classList);
}
});
.form-control{
border-style: none;
width: 100%;
height: 34px;
padding: 0px 0px;
font-size: 20px;
}

.form-field–is-active {
border: 1px solid green;
}

.form-field–is-filled {
outline: 1px dotted blue;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<div class=”form-field” id=”outerdiv” :class=”classList” ref=”outerDiv”>
<div class=”form-field__control”>
<label for=”exampleField” class=”form-field__label”>{fieldLabel}</label>
<input id=”exampleField” v-model=”fieldContent” @blur=”setActive(false, $event)” @focus=”setActive(true, $event)”
type=”text” class=”form-field__input” />
</div>
</div>
</div>