Jquery 对于已定义类的元素，classList未定义

我正在尝试向Vuejs中的元素添加和删除类。我的代码中缺少的链接是类列表返回undefined。为什么会这样？谢谢我用jQuery getElementById速记获取元素$

<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>

{{fieldLabel}}
从“jquery”导入$；
导出默认值{
名称：“FormField”，
道具：{fieldContent:String，fieldLabel:String}，
方法：{
设置活动（活动，事件）{
console.log（“this.fieldContent:+this.fieldContent”）；
const formField=event.target.parentNode.parentNode
如果（活动）{
formField.classList.add（'form-field--is active'）
}否则{
formField.classList.remove（'form-field--is active'）
event.target.value==''？
formField.classList.remove（'form-field--is filled'）：
formField.classList.add（'form-field--is filled'）
}
}
},
更新的（）{
console.log（“在初始化表单字段中”）；
console.log（“this.fieldContent:+this.fieldContent”）；
log（“来自速记getElementById:+$（“#outerdiv”）的结果）；
log（“元素的类列表：+$（“#outerdiv”）.classList）；
this.fieldContent==''？
$（“#outerdiv”）.classList.remove（'form-field--is-filled'）：
$（“#outerdiv”）.classList.add（'form-field--is-filled'）
}
}
.表格管制{
边框样式：无；
宽度：100%；
高度：34px；
填充：0px 0px；
字体大小：20px；
}

当您的主要问题已经解决时，您可以通过Vue方式简化代码，同时消除对jQuery的需求

通过使用，您可以使用计算属性替换ifs，如果您需要直接访问元素，则可以使用

只需运行以下代码段即可查看这些概念的实际应用：

newvue({
el:“#应用程序”，
数据：{
字段内容：“”，
字段标签：“”，
活动：错误，
},
计算：{
类列表（）{
返回{
“表单字段--已填充”：this.fieldContent！=''，
“表单字段--处于活动状态”：this.active，
};
}
},
方法：{
设置活动（活动，事件）{
console.log（“this.fieldContent:+this.fieldContent”）；
这个.active=active；
}
},
更新的（）{
console.log（“在初始化表单字段中”）；
console.log（“this.fieldContent:+this.fieldContent”）；
log（“来自速记getElementById:，this.$refs.outerDiv的结果”）；
log（“元素的类列表：+this.$refs.outerDiv.classList”）；
}
});
.form控件{
边框样式：无；
宽度：100%；
高度：34px；
填充：0px 0px；
字体大小：20px；
}
.form字段--处于活动状态{
边框：1px纯绿色；
}
.表单字段--已填充{
轮廓：1px点蓝色；
}

{{fieldLabel}}
当您的主要问题已经解决时，您可以通过Vue方式简化代码，同时消除对jQuery的需求

通过使用，您可以使用计算属性替换ifs，如果您需要直接访问元素，则可以使用

只需运行以下代码段即可查看这些概念的实际应用：


newvue({
el:“#应用程序”，
数据：{
字段内容：“”，
字段标签：“”，
活动：错误，
},
计算：{
类列表（）{
返回{
“表单字段--已填充”：this.fieldContent！=''，
“表单字段--处于活动状态”：this.active，
};
}
},
方法：{
设置活动（活动，事件）{
console.log（“this.fieldContent:+this.fieldContent”）；
这个.active=active；
}
},
更新的（）{
console.log（“在初始化表单字段中”）；
console.log（“this.fieldContent:+this.fieldContent”）；
log（“来自速记getElementById:，this.$refs.outerDiv的结果”）；
log（“元素的类列表：+this.$refs.outerDiv.classList”）；
}
});
.form控件{
边框样式：无；
宽度：100%；
高度：34px；
填充：0px 0px；
字体大小：20px；
}
.form字段--处于活动状态{
边框：1px纯绿色；
}
.表单字段--已填充{
轮廓：1px点蓝色；
}

{{fieldLabel}}
返回undefinedclassList是一个JavaScript方法，不能在JQuery元素上使用它。请尝试$（“#outerdiv”）[0]。类列表（）此操作有效。谢谢。返回undefinedclassList是一个JavaScript方法，不能在JQuery元素上使用它。请尝试$（“#outerdiv”）[0]。类列表（）此操作有效。非常感谢。