CODEWITHSUNDEEP
javascriptcssvue.jsinline-styles
user5392022
user5392022

Reputation: 3

How do I reference a javascript variable in the "style" attribute?

I'm using Vue and GraphQL to generate a grid of divs based on rows in a database. Each row/div has a background_color column. I want users to be able to change the background_color of each div separately using a form inside that div.

I've verified that my forms are correctly updating the corresponding background_color column, however when I try to apply that value to the div, nothing happens:

<div v-for="row in graphQL_result.table" class="grid">
     <div class="box" style="background:row.background_color">

If I am not able to reference a database value in my style, how should I approach this instead?

Upvotes: 0

Views: 92

Answers (1)

Musa Kavak
Musa Kavak

Reputation: 74

Try style binding:

<div class="box" :style="{'background' : row.background_color}"></div>

For more information

Upvotes: 2

Related Questions