看着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版本中正常工作！