Error values props js

Asked

Viewed 68 times

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.

inserir a descrição da imagem aqui

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>
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.