How to make a vue property conditional with another property in Vue?

Question

Probably this is TOO basic - but nowadays I'm all kinda noob. I'm studying VueJS and I'm stuck in one problem.

I have this <h3> and its style is binded to a Vue Object.

<h3 :style="headerStyleP2" class="p2 font-ranchers col-xs-6 col-sm-12">
   P2
</h3>

And here's the Vue object....

var notas = new Vue({
  el: '#notas',
  data: {
    obs1: "Digite a nota da P1",
    obs2: "",
    obs3: "",
    input1: "",
    input2: "",
    input3: "",
    inputStyle: {
      color: "white"
    },
    headerStyleP2: {
      color: this.input1 ? "blue" : "grey"
    },
    headerStyleP3: {
      color: "aqua"
    }
  }
})

So there you guys can see that I'm using a ternary. It's kinda working - but it's not being dynamic. When I refresh the page it's grey - but it never turns blue when I change the input1 value. (it's binded to another input - this one is working great.)

I'm felling I'm doing this the wrong way. How can I make it work?

Do a computed property for it please.

Yom T.
– Yom T.

2020-09-21 01:49:04 +00:00
Commented Sep 21, 2020 at 1:49 — Yom T.
– Yom T., Commented Sep 21, 2020 at 1:49

tony19 · Accepted Answer · 2022-07-15 22:30:31Z

2

Make the headerStyleP2 to be a computed property instead so it will always recompute with the latest value of this.input1. More info about computed properties here.

<h3 :style="headerStyleP2" class="p2 font-ranchers col-xs-6 col-sm-12">...</h3>

computed: {
  headerStyleP2() {
    return { color: this.input1 ? "blue" : "grey" };
  }
}

Here's a demo.

edited Jul 15, 2022 at 22:30

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 21, 2020 at 2:17

Blackraspberryyy

2,1442 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kajiyama VK Over a year ago

I'd like to say one thing, mister - please keep being this extremely helpful guy. It's wonderful that you even made a gif. Thank you so much. Worked beautifully.

Blackraspberryyy Over a year ago

You're welcome. Just doing what I can to help out a fellow coder. Goodluck!

Collectives™ on Stack Overflow

How to make a vue property conditional with another property in Vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related