I have a Vue.js form for signing up that features numerous similar fields. From my understanding, I should initialize the values as props rather than objects or arrays (since they will be pass-by-value).
My approach involves using a computed property with getters and setters. Would it be correct to emit the value to the parent component when setting my computed property? If not, what would be a better way to handle this?
Furthermore (and here's the main concern), if I emit from the setter and catch it in the parent component, wouldn't this potentially create an endless loop as it passes back down as a prop? Or does Vue have some mechanism to prevent re-emitting if the value remains unchanged? In other words, does assigning the same value passed through props trigger a watch-getter to fire?
Consider the hypothetical scenario where the component is defined first and then utilized within another part of the code:
Vue.component('signup-input',{
props:['placeholder','err','initialValue'],
template:`
<label>
<div class='signup-font'>Company Name Within Component</div>
<input @focus="err = null" v-model="tmpItem" :placeholder="placeholder" size="30" type="text" v-bind:class="{'no-margin error': err }" />
<label class="error copy-error" v-if="err">
{{err}}
</label>
</label>
`,
computed:{
tmpItem: {
get: function(){
return this.initialValue;
},
set: function(newValue){
console.log('here is newValue: ' + newValue);
// Emitting here could lead to an infinite loop?
}
}
},
})
var app7 = new Vue({
el: '#signup',
template: `
<div id="page-bg">
<signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>
<label for="company_name">
<div class='signup-font'>Company Name</div>
<input @focus="companyName.err = null" placeholder="My Company" v-model="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
<label class="error copy-error" v-if="companyName.err">
{{companyName.err}}
</label>
</label>