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版本中正常运行！

Answer 2

我的代码无效的真正原因是因为绑定到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;
    }
},

在VueJS中观察计算属性

2 个答案: