Vue.js v-attr="expression"

Question

使用 vue.js，我正在尝试禁用如果项目数量小于 1 的按钮。

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

它不工作，根本没有显示任何内容。但是，当我输入像这样的普通表达式时：

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

一切正常！

任何人都可以解释为什么我无法在我的情况下使用属性吗？有办法吗？

Answer 1

这样试试：

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

演示 fiddle:

Answer 2

您的代码无法正常工作不是因为 laravel 与 {{}} 语法冲突，而是因为在 v-attr 指令中您不需要值的 handlebars 语法，因为它将评估直接表达。

旁注，如果您使用 laravel 并且需要在括号内显示某些内容，请使用 @{{}}。 '@' 告诉 blade 忽略该表达式，以便 vue 实例可以处理它。

Answer 3

为了修正 Ivan 的回答，语法已经改变所以我相应地更新了 fiddle：http://jsfiddle.net/yMv7y/1734/

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

[编辑] 现在适用于 Vue 2.0+

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

javascript