No console
do navegador mostra esse aviso toda vez que seleciona uma data
no campo do formulário, eu defini um componente pai form
completo separado eu chamo no formfilho
em outro componente.
Obs: Está cadastrando normalmente só esse aviso que aparece no console, quando seleciona as datas nos campos datavalidade e dataExpedicao.
O aviso que aparece no console: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “dataExpedicao” found in.
Pedaço do Código html que está ocorrendo o aviso no 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 no componente pai estou passando corretamente.
props: ['dataExpedicao', .....],
No form filho(cadastro) chamo os dados do componente pai
<FormCadastro :dataExpedicao.sync="licenca.dataExpedicao" .....>
</FormCadastro >
<script>
import FormCadastro from './FormCadastro ';
export default {
data() {
return {
licenca: {
dataExpedicao: '',
.......
.......
}
}
},
components: {
'FormCadastro ': FormCadastro
}
</script>