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?
Actually the color of both will change when some data change.
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.
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>