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
2 Answers
Reset to default 6This 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;
}
},