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

Question

I need to add class name to some Vue components using their ref names. The ref names are defined in a config file. I would like to do it dynamically, to avoid adding class manually on each Vue component.

I have tried to find each component using $refs and if found, add the class name to the element's class list. The class is added, but it is removed as soon as user interaction begins (eg the component is clicked, receives new value etc.)

Here is some sample code I've tried:

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

the only thing that you need to make sure of is that your config.requiredFields must include the ref name as a string and nothing more or less ... you can achieve that with :

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

here is an example of a working sample :

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <one ref="one" ></one> <two ref="two" ></two> </div>

Answer 3

I know this question was posted ages ago, but I was playing around with something similar and came across a much easier way to add a class to $refs.

When we reference this.$refs['some-ref'].$el.classList it becomes a DOMTokenList which has a bunch of methods and properties you can access.

In this instance, to add a class it is as simple as

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

Answer 4

You've to make sure classList.value is an array. By default its a string.

methods: {
    onClick(ref) {
      const activeClass = 'active-submenu'
      if (!this.$refs[ref].classList.length) {
        this.$refs[ref].classList.value = [activeClass]
      } else {
        this.$refs[ref].classList.value = ''
      }
    },
  },

Answer 5

this post helped me tremendously. I needed to target an element within a v-for loop and I ended up writing a little method for it (i'm using Quasar/Vue). hopefully this will save someone else some time.

addStyleToRef: function(referEl, indexp, classToAdd) {
            //will add a class to a $ref element (even within a v-for loop) 
            //supply $ref name (referEl - txt), index within list (indexp - int) & css class name (classToAdd txt)
            if ( this.$refs[referEl][indexp].$el.classList.value.includes(classToAdd) ){
                console.log('class already added')
            } else {
                this.$refs[referEl][indexp].$el.classList.value = this.$refs[referEl][indexp].$el.classList.value + ' ' + classToAdd
            }  
        }