如何通过 $refs 将类添加到 Vue 组件

Question

我需要使用它们的引用名称将类名添加到一些 Vue 组件中。引用名称在配置文件中定义。我想动态地执行此操作，以避免在每个 Vue 组件上手动添加类。

我尝试使用查找每个组件$refs，如果找到，则将类名称添加到元素的类列表中。该类已添加，但一旦用户交互开始（例如单击组件、接收新值等），它就会被删除

这是我尝试过的一些示例代码：

beforeCreate() {
    let requiredFields = config.requiredFields
    this.$nextTick(() => {
        requiredFields.forEach(field => {
            if(this.$refs[field]) {      
                this.$refs[field].$el.classList.add('my-class')
            }
        })
    })
}

Answer 1

你可以使用这个：

this.$refs[field].$el.classList.value = this.$refs[field].$el.classList.value + 'my-class'

Answer 2

我知道这个问题是很久以前发布的，但我正在研究类似的东西，并发现了一种更简单的方法来向 $refs 添加类。

当我们引用它时，this.$refs['some-ref'].$el.classList它会变成一个DOMTokenList，其中有许多您可以访问的方法和属性。

在本例中，添加一个类非常简单

this.$refs['some-ref'].$el.classList.add('some-class')

Answer 3

您需要确保的唯一一件事是您config.requiredFields必须将引用名称包含为 astring并且仅此而已......您可以通过以下方式实现这一点：

   //for each ref you have 
    for (let ref in this.$refs) {
        config.requiredFields.push(ref)
     }
   // so config.requiredFields will look like this : ['one','two]

这是一个工作示例的示例：

   //for each ref you have 
    for (let ref in this.$refs) {
        config.requiredFields.push(ref)
     }
   // so config.requiredFields will look like this : ['one','two]

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('one', {
  template: '<p>component number one</p>'
})
Vue.component('two', {
  template: '<p>component number two</p>'
})

new Vue({
  el: "#app",
  beforeCreate() {
    let requiredFields = ['one','two'] //  config.requiredFields should be like this
    this.$nextTick(() => {
        requiredFields.forEach(field => {
            if(this.$refs[field]) {      
                this.$refs[field].$el.classList.add('my-class')
            }
        })
    })
}
})

.my-class {
  color : red;
}