I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components.
To address this, I attempted to locate each component using the `$refs` property and then dynamically add the desired class to the element's class list. However, I noticed that the added class gets removed as soon as there is any user interaction with the component (e.g. clicking on it or updating its value).
Below is a snippet of the code that I experimented with:
beforeCreate() {
let requiredFields = config.requiredFields
this.$nextTick(() => {
requiredFields.forEach(field => {
if(this.$refs[field]) {
this.$refs[field].$el.classList.add('my-class')
}
})
})
}