Vue中v-for循环内使用v-if时如何为activate按钮添加禁用条件

你可以直接在v-else对应的activate按钮上，通过Vue的动态属性绑定disabled实现需求。disabled是HTML原生的按钮禁用属性，用:（v-bind的简写）绑定后就可以响应data里的变量变化，值为true时按钮会被禁用，值为false时恢复可用。

修改后的代码如下：

<button v-if="Collection.status" type="button">deactivate</button>
<button v-else type="button" :disabled="disableButton">activate</button>

额外说明：

• 如果disableButton是组件全局的data变量，上面的写法可以直接生效，所有渲染出来的activate按钮都会跟随这个变量的状态控制是否禁用
• 如果你需要每个遍历项的禁用状态独立控制，可以把禁用字段存在遍历的数组对应项中，写法调整为:disabled="Collection.disableButton"即可

内容的提问来源于stack exchange，提问作者iSnuff