[Vuejs]-Vue.js v-attr="expression"

by

0👍

✅

Try it like this:

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

Demo fiddle:

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

0👍

Your code was not working not because laravel conflicts with {{}} syntax but because inside the v-attr directive you don’t need the handlebars syntax for the value because it will evaluate the expression directly.

On a side note if you are using laravel and need to show something within brackets use @{{}}. The ‘@’ tells blade to ignore that expression so the vue instance can take care of it.

0👍

For retification on Ivan’s answer, syntax has since changed so I updated the fiddle accordingly: http://jsfiddle.net/yMv7y/1734/

<div id="demo" v-for="item in itemlist">
    <button :disabled="item.qty < 1"> Click</button>
</div>

[Edit] This now works for Vue 2.0+

<div id="demo">
   <button v-for="item in itemlist" :disabled="item.qty < 1"> Click</button>
</div>

http://jsfiddle.net/yMv7y/2022/

Leave a comment