Отключение/включение кнопок по данным в Vue.js?

Question

Я смотрю Vue.js с целью упрощения приложения, которое начинает слишком сложно с jQuery. Я хочу использовать привязку данных так, чтобы состояние объекта «Заказ» автоматически включало или отключает определенные кнопки (например, я хочу, чтобы кнопка отправки автоматически отключилась, если не существует порядка, содержащего элементы). У меня есть кое-что частично работает, с этой декларацией:

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 на действительный объект заказа.