Here is my Vue code:

      <icon
          :color="itemDynamicColor"
          :data="icon"
      />
      <span v-bind:style="dynamicStyle">SpanText</span>

I want the icon and span text keep same color, as you see, I use computed property to define icon color and span color. However I think this way is a little stupid.

I wonder if there is any better way?

EDIT

Actually the color of both will change when some data change.

CodePudding user response：

You could handle this all in plain CSS by using a custom property for the color you want, and then setting the color of the <icon> and <span> to that.

CodePudding user response：

The color of both will change when some data change.

To achieve this, you can update the dynamicStyle object in both <icon> and <span> based on the condition as per your requirement.

Demo :

new Vue({
  el: '#app',
  data: {
    dynamicColor: {
      color: 'red'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <!-- For icon you can apply same dynamicColor property dynamically -->
  <span :style="dynamicColor">SpanText</span>
</div>