Vue中通过$refs设置样式报错：无法设置undefined的cssText属性

嘿，这个问题我之前也碰到过！当然可以通过$refs给元素添加样式，但你现在遇到的报错是因为你拿到的是Vue组件实例，而非直接的DOM节点，所以直接访问.style自然会提示“Cannot set property 'cssText' of undefined”。

为什么会这样？ #

当你把ref绑定在自定义Vue组件上时，this.$refs['xxx']返回的是该组件的Vue实例对象，而不是DOM元素。组件实例本身并没有.style属性，所以直接设置cssText肯定会报错——哪怕你打印这个实例能看到内容，它也不是DOM节点。

解决方法 #

根据你的场景，有几种可行的方式：

1. 访问组件的根DOM元素（$el）

Vue组件实例有一个$el属性，指向组件的根DOM节点，你可以通过它来设置样式：

const targetComponent = this.$refs['ticketCode_'+this.resoTrans_id];
if (targetComponent) {
  targetComponent.$el.style.cssText = "background-color:#66BB6A !important; border:1px solid #66BB6A !important; color:#fff !important;";
}

注意：最好加个判断，避免组件还没挂载完成时$refs为undefined的情况。

2. 在组件内部给根元素单独加ref

如果你有权限修改ticketCode组件的代码，可以在组件的根元素上添加一个ref（比如叫rootEl），然后通过组件实例访问这个内部ref：

// 组件内部模板示例
<template>
  <div ref="rootEl">...</div>
</template>

// 父组件中设置样式
const targetComponent = this.$refs['ticketCode_'+this.resoTrans_id];
if (targetComponent) {
  targetComponent.$refs.rootEl.style.cssText = "background-color:#66BB6A !important; border:1px solid #66BB6A !important; color:#fff !important;";
}

这种方式更灵活，尤其是当组件根元素可能变化时，不用依赖$el。

3. 确保ref已挂载完成

如果你的组件是动态生成的（比如用v-for或者条件渲染），要确保在DOM渲染完成后再操作$refs。可以放在mounted钩子中，或者用nextTick等待DOM更新：

this.$nextTick(() => {
  const targetComponent = this.$refs['ticketCode_'+this.resoTrans_id];
  if (targetComponent) {
    targetComponent.$el.style.cssText = "background-color:#66BB6A !important; border:1px solid #66BB6A !important; color:#fff !important;";
  }
});

额外提示 #

其实Vue更推荐通过绑定class或者style属性的方式来控制样式，比如在父组件中给子组件传一个状态，子组件根据状态切换样式类，这样更符合Vue的响应式理念，也避免直接操作DOM的副作用。比如：

<!-- 父组件 -->
<ticket-code 
  :ref="'ticketCode_'+resoTrans_id" 
  :is-active="resoTrans_id === currentActiveId"
></ticket-code>

<!-- 子组件 -->
<template>
  <div :class="{ active: isActive }">...</div>
</template>
<style>
.active {
  background-color:#66BB6A;
  border:1px solid #66BB6A;
  color:#fff;
}
</style>

不过如果你的场景必须直接操作DOM，前面的方法完全可行。

内容的提问来源于stack exchange，提问作者BGTabulation BGTabulate