Question

我正在查看Vue.js，以便简化一个开始变得有点过于复杂的应用程序。我想利用数据绑定，以便'Order'对象的状态自动启用或禁用某些按钮（例如，我希望自动禁用提交按钮，除非存在包含项目的订单）。我有一些部分有效的东西，声明：

 var content = new Vue({
    el: '#content',
    computed: {
        orderExists: function () {
            return (shopOrder != null && !isEmpty(shopOrder.items));
        }
    }
});

我在这样的按钮中使用它：

<button type="button" id="btnDisplay" v-bind:disabled="!orderExists">Show Selected</button>

在页面加载时，使用此技术的按钮确实已正确启用/禁用。但是，当我向订单对象添加项目，从而更改其状态时，我没有看到按钮状态中的任何更新 - 它们应该被启用。

我认为我误解了与Vue.js一起运作的基本原理，因为我只用了几个小时，所以任何帮助都会受到赞赏。

Answer 1

嗯，为什么不将该属性作为反应数据传递？

您可以执行以下操作：

...
computed: {
        orderExists: function () {
            this.disabled = (shopOrder != null && !isEmpty(shopOrder.items));
        }
    }

Fiddle.

DP：示例是在Vue 2中

Answer 2

问题在于Vue必须管理您的数据对象，以便能够以一种可以观察到它们变化的方式进行设置（即被激活）。这是通过为data创建指定Vue选项来完成的。类似的东西：

data: {
    shopOrder: null
}

然后像这样更新您的代码：

orderExists: function () {
    return (this.shopOrder != null && !isEmpty(this.shopOrder.items));
}

当然，您需要将this.shopOrder设置为有效的订单对象。

按Vue.js中的数据禁用/启用按钮？

2 个答案: