最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Watching a computed attribute in VueJS - Stack Overflow

programmeradmin6浏览0评论

In my project I have a form that can only be submitted when certain fields are filled in, so I've created the canSubmit function in my ViewModel:

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

I also have a button that I want to show if canSubmit returns true, and some <inputs> that change the data model:

<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>

So when I change the textarea or the select, my model updates, and this means that canSubmit returns true. Howevever the button doesn't know that canSubmit has changed, so remains invisible.

Is there a way of watching a derived attribute or method in order to get this to work? Alternatively can I force the button to recheck its bindings?

In my project I have a form that can only be submitted when certain fields are filled in, so I've created the canSubmit function in my ViewModel:

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

I also have a button that I want to show if canSubmit returns true, and some <inputs> that change the data model:

<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>

So when I change the textarea or the select, my model updates, and this means that canSubmit returns true. Howevever the button doesn't know that canSubmit has changed, so remains invisible.

Is there a way of watching a derived attribute or method in order to get this to work? Alternatively can I force the button to recheck its bindings?

Share Improve this question edited Sep 30, 2014 at 8:40 Migwell asked Sep 30, 2014 at 2:20 MigwellMigwell 20.2k24 gold badges106 silver badges180 bronze badges 1
  • It might be easier to figure the problem if you set up a simple jsfiddle – julesbou Commented Sep 30, 2014 at 8:02
Add a ment  | 

2 Answers 2

Reset to default 6

This works correctly in the latest 0.11 version!

The real reason my code wasn't working was because the variables bound to the textarea and select were not considered dependencies for the canSubmit puted property.

I found this out in the documentation here.

The solution, as on the site, was to access those variables initially, e.g.

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;
    }
},
发布评论

评论列表(0)

  1. 暂无评论