在VueJS中观察计算属性

Question

在我的项目中,我有一个只能在填写某些字段时才能提交的表单,所以我在ViewModel中创建了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>

因此,当我更改textarea或select时,我的模型会更新,这意味着canSubmit返回true.然而,按钮不知道canSubmit已经改变了,所以保持不可见.

有没有办法观察派生的属性或方法,以使其工作？或者,我可以强制按钮重新检查其绑定吗？

Answer 1

这在最新的0.11版本中正常工作!