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?

• javascript
• mvvm
• vue.js

• It might be easier to figure the problem if you set up a simple jsfiddle – julesbou Commented Sep 30, 2014 at 8:02

2 Answers 2

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;
    }
},