Mustafa Mustafa - 3 months ago 26
Javascript Question

Vue JS v-attr="expression"

Using VUE JS, I'm trying to disable a button if the qty of the item is less than 1.

<div v-repeat = "item: itemsList">
<button v-attr="disabled: {{item.qty}} < 1"> Click </button>
......


It is not working, nothing is being displayed at all. However, when I put a normal expression like:

<div v-repeat = "item: itemsList">
<button v-attr="disabled: 0 < 1"> Click </button>
......


It's working properly!

Can anyone explain why I'm unable to use the property in my condition? and is there a way to do it?

Answer

Try it like this:

<button v-attr="disabled: item.qty<1"> Click</button>

Demo fiddle:

http://jsfiddle.net/yMv7y/721/