How to listen value of the data and change color of a button?

[bekki]

(I am writing this gently and with quite funny mood).

Hi, everyone who are reading this question topic?
Just I know how to use the V-if and V-else but there is a problem.
How I can use them in attributes. For instance, with color attribute of a button.
I tried many codes but they were unsuccessful. So I will share the code which was written before the flow of problems:

<div class="q-pa-md">
<!-- Button should be blue if the button value is equal to 0 otherwise it should be red-->
    <button color="red">Hello World</button>
</div>

and the Script(JS) part code:


//Note that returned button value should be string but number. As following code.
//And the button value is dynamic it changes its value when I pressed another button.

data() {
    return {
        button: '0'
    }
}

Expected: When I press the button the value of button data should change like this: 0 when I press the other button it becomes 1. But the data value of button should be string. And when the value changes the color should become to the default (red) color but if it is 0 it should be blue;

Thanks for th answer in advance. I wait your answer in this 24 hours. Thanks again.

[s.molinari]

Learn about computed properties. https://vuejs.org/v2/guide/computed.html

Scott

[bekki]

@s-molinari namely, Scott, thank you. I just found the answer. And I want to answer my question myself. Because it will be a good answer for the ones who came after us to here.
So the answer looks like this:

<div id="q-app">
  <div class="q-pa-md">
		<q-btn :color="exampleColour" label="Colorful button" />
    </div>
</div>

and the important part (JS):

new Vue({
  el: '#q-app',
  data() {
     return {
        exambutton: '0'
     }
  },
  computed: {
    examColour() {
      if(this.exambutton === '0') {
        return 'red'
      } else {
        return 'orange'
      }
    }
  }
})

And you can find more here in the pen: https://codepen.io/Mirzo-N1/pen/povLzGv

Thank you for everyone, Just I understood somethng, sometimes working on an error makes the best result and the state which is how you find the code will never be forgotten.

Just you can close the topic.

[s.molinari]

Glad you figured it out. You obviously need to learn a whole lot more, not just about Vue, but about JavaScript.

So, take a look at the conditional (ternary) operator. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Your computed above could look like this.

computed: {
  examColour () {
    return this.exambutton === '0' ? 'red' : 'orange'
  }
}

Much simpler isn’t it?

exambutton should also be written examButton, since it’s two words.

And please take this course: https://www.udemy.com/course/vuejs-2-the-complete-guide/

Or look into other very good Vue tutorials. It will save you a lot of time later trying to figure out how Vue works.

Scott

[bekki]

@s-molinari Oh! “examButton” I get it. Thank you, Scott. I’ve already bought this course and watching it. And I am reciting the things I learned when I am alone. Almost, I finished half of it. And I try to learn the full stack web-development from the beginning. I already know HTML, CSS “as my 5 fingers”. But the three things I want to learn for making completely dynamic, fast and pretty website are JS, VueJS and Quasar. And Again I want to add a feature to this trio. And this is database. What do you say? Which database is more compatible with the Quasar framework? I wait your answer.

[bekki]

@s-molinari ???

[metalsadman]

@VIncent-Lucifer quasar doesn’t care what database or backend you use, since it’s not what a frontend framework’s concern.