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

9

我需要通过它们的引用名称为一些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')
            }
        })
    })
}

通常情况下,您可以使用v-bind:class在模板中动态添加类。您真的需要使用$ref元素来分配类吗? - ssc-hrep3
1
为什么不能使用类似于 :class="{'my-class': requiredFields.includes('fieldName')}" 而不是 ref="fieldName" - NaN
我想避免在模板的所有组件中都这样添加它。此外,我希望可以通过配置文件进行配置。 - Beatrix
6个回答

9

您可以使用这个:


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


7

我知道这个问题早已经被提出很久了,但我最近在尝试类似的东西,并且找到了一个更简单的方法来向 $refs 添加一个 class。

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

在这种情况下,要添加一个 class 就像这样简单:

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

2
你只需确保你的config.requiredFields中包含引用名称作为string,而不多也不少......你可以通过以下方式实现:

"你需要确保config.requiredFields中仅包含引用名称作为字符串,没有多余或缺少的内容......你可以使用以下代码实现:"
   //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,该类就会被删除...我不明白为什么会发生这种情况。 - Beatrix
@trix啊,如果你能在codesandbox或者codepen/jsfiddle上创建一个示例模板,那么调试会更容易。 - Abdelillah Aissani

0

这篇文章对我帮助很大。我需要在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
            }  
        }

0

你需要确保 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 = ''
      }
    },
  },

-1

let tag = this.$refs[ref-key][0];
$(tag).addClass('d-none');

只需使用let tag = this.$refs[ref-key][0];获取标签,然后将此标签放入jquery对象$(tag).addClass('d-none');中,类将被添加到所需的标签。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接