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" >
     <div  style="background:row.background_color">

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

CodePudding user response：

Try style binding:

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

For more information