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

您唯一需要确保的是，config.requiredFields必须将引用名称包含为string，并且几乎没有其他内容……您可以使用：

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

<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

您必须确保classList.value是一个数组。默认情况下，它是一个字符串。

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 4

这篇文章对我帮助很大。我需要在 v-for 循环中定位一个元素，我最终为它编写了一个小方法（我正在使用 Quasar/Vue）。希望这会为其他人节省一些时间。

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

如何通过$ refs

4 个答案: