No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Dynamically change background color

    Help
    2
    3
    290
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • V
      vinnyc last edited by

      Hi folks, is this possible if one is not using themes? I want to change the background colors of my left/right drawers:

       <q-drawer show-if-above v-model="left" side="left" bordered :content-style="{'background-color' : leftColor}">
                  <!-- drawer content -->
              </q-drawer>
      
              <q-drawer show-if-above v-model="right" side="right" bordered :content-style="{'background-color' : rightColor}">
                  <!-- drawer content -->
              </q-drawer>
          data: function () {
                      return {
                          version: QMediaPlayer.version,
                          left: false,
                          right: false,
                          leftColor: "#000000",
                          rightColor: "#000000", 
      ...
          methods: {
          onTimeUpdate(currentTime, remaining) {
                      axios.get("/color?time="+currentTime).then(function(response){
                          let data = response.data;
                          this.leftColor = data[0];
                          this.rightColor = data[1];
      
                      });
                  }
      

      But the drawers are not updating (the http call is working as expected and I can see the variables changing but the components do not update. Is there a way to do this?

      Thank you

      I 1 Reply Last reply Reply Quote 0
      • I
        Ilia @vinnyc last edited by

        @vinnyc said in Dynamically change background color:

        background-color

        Can you change background-color to backgroundColor in style and see if that helps?

        1 Reply Last reply Reply Quote 0
        • V
          vinnyc last edited by

          yep that helped 😃 also moved it to its own json object: leftStyle: {backgroundColor: '#000000'} and self.leftStyle.backgroundColor = data[0]; does the trick. Thank you

          1 Reply Last reply Reply Quote 1
          • First post
            Last post