如何在VueJS方法中为Material图标设置条件颜色？

当然有可行的方案啦！结合你使用的Quasar v0.15.9、Vue v2.5.0和Stylus，完全可以实现同一个Material图标根据fiber_status切换颜色的需求，下面是具体的实现步骤：

1. 统一图标并动态绑定状态类 #

首先把原来的三个不同图标替换成你需要的同一个Material图标，然后在q-icon组件上根据fiber_status动态绑定对应的状态类名。假设你的fiber_status有三种状态值（比如active、pending、inactive），模板代码可以这么写：

<q-list>
  <q-list-item v-for="item in yourDataList" :key="item.id">
    <q-collapsible>
      <!-- 使用同一个图标，动态绑定状态类 -->
      <q-icon
        name="fiber_manual_record" <!-- 替换成你想用的Material图标名称 -->
        :class="`status-${item.fiber_status}`"
      />
      <!-- 你的折叠面板内容 -->
    </q-collapsible>
  </q-list-item>
</q-list>

如果你的fiber_status值不适合直接拼接成类名（比如包含特殊字符），可以用一个方法来映射规范的类名：

<script>
export default {
  data() {
    return {
      yourDataList: [/* 你的列表数据 */]
    }
  },
  methods: {
    getIconStatusClass(status) {
      switch(status) {
        case '在线':
          return 'status-active'
        case '待处理':
          return 'status-pending'
        case '离线':
          return 'status-inactive'
        default:
          return 'status-inactive'
      }
    }
  }
}
</script>

模板里调用这个方法：

<q-icon
  name="fiber_manual_record"
  :class="getIconStatusClass(item.fiber_status)"
/>

2. 组件级Stylus设置颜色 #

在Vue组件的<style>标签里（记得加上scoped实现组件级样式，指定lang="stylus"），给每个状态类设置对应的颜色：

<style scoped lang="stylus">
/* 直接给状态类设置颜色，Quasar图标会继承这个样式 */
.status-active
  color #4CAF50  /* 绿色，对应活跃状态 */

.status-pending
  color #FFC107  /* 黄色，对应待处理状态 */

.status-inactive
  color #F44336  /* 红色，对应离线/无效状态 */

/* 可选：加上.q-icon前缀，让样式更精准，避免影响其他元素 */
.q-icon.status-active
  color #4CAF50
</style>

因为Quasar的q-icon组件会渲染出带有.q-icon类的元素，它会继承父元素或自身类的color属性，所以这个写法完全可以生效，而且是组件级的样式，不会影响其他组件的图标。

这个方案完美契合你的需求：使用同一个图标，通过Stylus设置组件级样式，根据三种状态切换对应颜色，完全适配你当前的技术栈版本。

内容的提问来源于stack exchange，提问作者Matt Larsuma