Passing data to vue.js method

Question

I have a variable with color. I want to change the color of the text. How can I set this variable to v-bind: style event?

  <div class="drop" :style="'color:{{item.color}};'">
     some text
  </div>

Majed Badawi · Accepted Answer · 2021-01-21 20:20:38Z

1

Here is an example of style binding:

new Vue({
  el:"#app",
  data: () => ({ item: { color:'red' } })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="drop" :style="{ color: item.color }">
    some text
  </div>
</div>

answered Jan 21, 2021 at 20:20

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Majed Badawi Over a year ago

@Max you're welcome, please mark the answer as the solution to close the question

tony19 · Accepted Answer · 2022-07-16 01:03:48Z

1

As described in the Vue documentation here, you can use the following object syntax to bind styles:

<div class="drop" :style="{ color: item.color }">
     some text
</div>

edited Jul 16, 2022 at 1:03

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 21, 2021 at 20:20

steve16351

5,8572 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Passing data to vue.js method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related