Смотря вычисляемый атрибут в VueJS

Question

В моем проекте у меня есть форма, которая может быть представлена ​​только тогда, когда некоторые поля заполнены, поэтому я создал функцию canSubmit в моем ViewModel:

var vm = new Vue({ 
    data: { 
     experiments: [], 
     genes: "" 
    }, 
    el: "html", 
    computed: { 
     canSubmit: function() { 
      switch (this.searchType) { 
       case "": 
        return false; 
       case "gene": 
        return this.genes.length > 0 && this.experiments.length > 0; 
       default: 
        return false; 
      } 
     } 
    } 
}); 

У меня также есть кнопка, которую я хочу показать, если canSubmit возвращает истину, и некоторые <inputs>, которые изменяют модель данных:

<textarea v-model="genes" name="genes" id="gene_list"></textarea> 
<select v-model="experiments" name="experiments" multiple id="select_result_exps"> 
    <!--Various <options>--> 
</select> 
<button name="query" v-if="canSubmit" value="search" type="submit"">Submit</button> 

Так что, когда я изменить текстовое поле или выберите, мои обновления модели, и это означает, что canSubmit возвращает истину. Как бы кнопка не знала, что canSubmit изменился, поэтому остается невидимым.

Есть ли способ просмотра производного атрибута или метода, чтобы заставить это работать? В качестве альтернативы я могу заставить кнопку повторно проверить свои привязки?

Answer 1

Настоящая причина, по которой мой код не работал, состоял в том, что переменные, связанные с текстовым полем и select, не считались зависимыми для вычисленного свойства canSubmit.

Я нашел это в documentation here.

Решение, как и на сайте, состояло в том, чтобы получить доступ к этим переменным изначально, например.

enableSubmit: function() { 
    this.genesString; //Adding these 
    this.gene_search.experiments; //lines fixed the problem 

    switch (this.search_type) { 
     case "gene": 
      return this.genesString.length > 0 && this.gene_search.experiments.length > 0; 
     case "experiment": 
      return this.experiment_search.experiment.length > 0; 
     default: 
      return false; 
    } 
}, 

Answer 2

Это верно работает в последней версии 0.11!