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

【问题标题】：How to add class to Vue component via $refs如何通过 $refs 向 Vue 组件添加类
【发布时间】：2019-12-05 02:57:01
【问题描述】：

我需要使用一些 Vue 组件的 ref 名称为它们添加类名。 ref 名称在配置文件中定义。我想动态地做，以避免在每个 Vue 组件上手动添加类。

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

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

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

【问题讨论】：

通常，您可以使用v-bind:class 在模板中动态添加类。你真的必须使用 $ref 元素来分配类吗？
你为什么不能使用:class="{'my-class': requiredFields.includes('fieldName')}" 代替ref="fieldName"？
我想避免像这样将它添加到模板中的所有组件中。此外，我希望它可以通过配置文件进行配置。

标签： javascript html css vue.js

【解决方案1】：

您唯一需要确保的是，您的 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>

【讨论】：

感谢您的回答。这正是我的配置的样子。正如我所提到的，该类已成功添加到组件中，但是只要我单击例如v-text-field，该类已被删除...我不明白为什么会发生这种情况。
@trix 啊，如果你可以在codesandbox 或 codepen / jsfiddle 上创建一个示例模板会更容易调试

【解决方案2】：

你可以用这个：


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

【讨论】：

【解决方案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 = ''
      }
    },
  },

【讨论】：

【解决方案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
            }  
        }

【讨论】：

【解决方案5】：

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

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

在这种情况下，添加一个类很简单

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

【讨论】：