When attempting to determine if a person's input should be considered invalid due to being empty, I keep encountering the error message "Avoid mutating a prop directly".
<script type="text/x-template" id="srx">
<input type="number" name="persons" id="persons" value="" v-model="persons" :class="{invalid: !persons}">
</script>
<div id="app">
{{stepText}}
<sr-el :persons="1"></sr-el>
<button v-if="currentStep > 1" type="button" v-on:click="previous()">prev</button>
<button v-if="currentStep < 6" type="button" :disabled="currentStepIsValid()" v-on:click="next()">
next</button>
</div>
Vue.component('sr-el', {
template: '#srx',
props: ['persons'],
})
var App = window.App = new Vue({
el: '#app',
data: {
persons: '1'
currentStep: 1,
},
methods: {
currentStepIsValid: function() {
if (this.currentStep == 1) {
this.stepText = "Step 1;
return !(this.persons > 0);
}
},
previous: function() {
this.currentStep = this.currentStep - 1;
// prev slide
},
next: function() {
this.currentStep = this.currentStep + 1;
// next slide
}
}
})