1
In the console
browser displays this warning every time it selects a data
in the form field, how do I resolve ? I set a component pai form
complete separate I call on formfilho
in another component.
Obs: You are normally only registering this warning that appears on the console when you select dates in the Date and Date fields.
Error if image does not appear: [Vue warn]: Avoid mutating a prop directly Since the value will be overwritten Whenever the Parent Component re-renders. Instead, use a date or computed Property based on the prop’s value. Prop being mutated: "dataExpedicao" found in.
Piece of html code that is occurring the warning in the console
<div class="form-group col-sm-4">
<label class="form-control-label">Data de Expedição *</label>
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<my-date-picker v-validate="'required'" v-model="dataExpedicao"
@input="$emit('update:dataExpedicao', dataExpedicao)" name="data de expedição">
</my-date-picker>
</div>
<small class="text-danger"
v-show="errors.has('data de expedição')">{{ errors.first('data de expedição') }}</small>
</div>
<div class="form-group col-sm-4">
<label class="form-control-label">Data de Validade *</label>
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<my-date-picker v-validate="'required'" v-model="dataValidade"
@input="$emit('update:dataValidade', dataValidade)" name="data de validade">
</my-date-picker>
</div>
<small class="text-danger"
v-show="errors.has('data de validade')">{{ errors.first('data de validade') }}</small>
</div>
Props on the parent component I’m going through correctly.
props: ['dataExpedicao', .....],
No form child(registration) call the parent component data
<FormFilho :dataExpedicao.sync="licenca.dataExpedicao" .....>
</FormFilho>
<script>
import FormFilho from './FormFilho';
export default {
data() {
return {
licenca: {
dataExpedicao: '',
.......
.......
}
}
},
</script>