Set style attribute of <span> in vuejs3 dynamically-CodePudding

After I make an API call, I want to create elements according to the response. I want the background color of the span be determined by the response I get. I create the span elements like this:

<span v-else  v-bind:style="determineColorOfLine(response)">
   {{ response }}

And I have a function called determineColorOfLine inside of methods

determineColorOfLine(response){
   console.log(response)
   return ("background-color: "   response)
}

I expect to see the text "response" with the background color of the API request's response (e.g. "blue"). However, the background color does not change. When I inspect the span element, I see

style=""

but I would expect

style="background-color: blue"

In the console, I see the log "blue", so the method gets run. I don't see any errors. Where is the error.

CodePudding user response：

You're returning style="background-color: blue" and binding it to the inline style in effect creating the statement style=style="background-color: blue"

Instead, use return 'background-color: ' response;

CodePudding user response：

Use computed property

computed: {
    colorOfLine() {
        return { backgroundColor: this.response } 
    } 
}

<span :style="colorOfLine"...

CodePudding user response：

You need to return an object:

determineColorOfLine(response){
   console.log(response)

   // Make an object here
   return {"background-color": response}
}