看着VueJS

Question

在我的項目已計算屬性我有當某些字段填寫只能提交一個表單，所以我創建了canSubmit功能在我的視圖模型：

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返回true，有的<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返回true。 Howevever的按鈕不知道canSubmit已經改變，所以仍然是看不見的。

有沒有一種方法來觀察派生的屬性或方法，以得到它的工作？或者，我可以強制按鈕重新檢查其綁定？

Answer 1

我的代碼不工作的真正原因是因爲綁定到textarea和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版本中正常工作！