vue.js - 通过 Vue.js 中的数据禁用/启用按钮？

Question

我正在研究 Vue.js，以简化使用 jQuery 开始变得有点过于复杂的应用程序。我想利用数据绑定(bind)，以便“订单”对象的状态自动启用或禁用某些按钮(例如，我希望自动禁用提交按钮，除非存在包含项目的订单)。我有一些部分有效的东西，声明如下:

 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

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

你可以这样做:

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

Fiddle.

DP:例子在 Vue 2 中