I am unable to identify this error: [Vue warn]: Error in render: "Typeerror: Cannot read Property '$error' of Undefined"

Question

    <template>
  <div class="col-md-12">
    <form class="form-horizontal" role="form">
      <div class="tab-content">
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.nomer.$error }">
          <label for="nomer" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Nome: *</label>
          <div class="col-md-9">
            <input type="text" class="form-control" id="nomer" v-model="remedio.nomer" autocomplete="off" @input="$v.remedio.nomer.$touch()" maxlength="50">
            <span class="help-block" v-show="$v.remedio.nomer.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group">
          <label for="descricao" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Descrição: </label>
          <div class="col-md-9">
            <textarea
              type="text"
              class="form-control"
              id="descricao"
              autocomplete="off"
              v-model="remedio.descricao"
            ></textarea>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.dataDeValidade.$error }">
          <label for="dataDeValidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Data de Validade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="dataDeValidade"
                autocomplete="off"
                v-model="remedio.dataDeValidade" />
              <span class="help-block" v-show="$v.remedio.dataDeValidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.quantidade.$error }">
          <label for="quantidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Quantidade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="quantidade"
                autocomplete="off"
                v-model="remedio.quantidade" />
              <span class="help-block" v-show="$v.remedio.quantidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.principioAtivo.$error }">

I couldn’t identify what’s undefined in my code

Answer 1

<template>
  <div class="col-md-12">
    <form class="form-horizontal" role="form">
      <div class="tab-content">
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.nomer.$error }">
          <label for="nomer" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Nome: *</label>
          <div class="col-md-9">
            <input type="text" class="form-control" id="nomer" v-model="remedio.nomer" autocomplete="off" @input="$v.remedio.nomer.$touch()" maxlength="50">
            <span class="help-block" v-show="$v.remedio.nomer.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group">
          <label for="descricao" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Descrição: </label>
          <div class="col-md-9">
            <textarea
              type="text"
              class="form-control"
              id="descricao"
              autocomplete="off"
              v-model="remedio.descricao"
            ></textarea>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.dataDeValidade.$error }">
          <label for="dataDeValidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Data de Validade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="dataDeValidade"
                autocomplete="off"
                v-model="remedio.dataDeValidade" />
              <span class="help-block" v-show="$v.remedio.dataDeValidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.quantidade.$error }">
          <label for="quantidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Quantidade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="quantidade"
                autocomplete="off"
                v-model="remedio.quantidade" />
              <span class="help-block" v-show="$v.remedio.quantidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.principioAtivo.$error }">
          <label for="principioAtivo" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Princípio Ativo: *</label>
          <div class="col-md-9">
              <multiselect id="principioAtivo" :options="principios" placeholder="Digite para pesquisar" label="nomep" track-by="id" v-model="remedio.principioAtivo" :show-labels="false">
                  <span slot="noResult">Nenhum registro encontrado</span>
              </multiselect>
              <span class="help-block" v-show="$v.remedio.principioAtivo.$error">Campo é obrigatório</span>
          </div>
        </div> 
      </div>
      <div class="bottom-sticker">
          <button type="submit" id="btnSalvar" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-priority-primary button-form"
              @click.prevent="salvar(false)">
              <span class="ui-button-text ui-c">Salvar</span>
          </button>
          <button type="submit"  id="btnSalvarNovo" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only btn-verde button-form"
              @click.prevent="salvar(true)">
              <span class="ui-button-text ui-c">Salvar/Novo</span>
          </button>
          <button  id="btnVoltar" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left button-form btn-voltar" @click.prevent="voltar">
              <span class="ui-button-icon-left ui-icon ui-c ui-icon-arrowreturnthick-1-w"></span>
              <span class="ui-button-text ui-c">Voltar</span>
          </button>
      </div>
      </form>
  </div>
</template>

<script>
import { required} from 'vuelidate/lib/validators'
import { HTTP } from '@/components/http-common'
import Notificacao from '@/components/ui/Notificacao'
import RouterUtils from '@/components/util/RouterUtils'
import { validationMixin } from 'vuelidate'
import Multiselect from 'vue-multiselect'

const REMEDIO_DEFAULT = {
    nomer: '',
    descricao: '',
    dataDeValidade: '',
    quantidade: '',
    principioAtivo: null
}

export default {
  data(){
    return{
      principios: [],
      remedio: REMEDIO_DEFAULT
    }
  },
  components: {
    Multiselect
  },
  mixins: [validationMixin],
  validations: {
    remedio: {
      nomer: {
        required
      },
      dataDeValidade: {
        required
      },
      quantidade: {
        required
      },
      principios: {
        required
      }
    }
  },
  mounted(){
    let id = this.$route.params.id
    if(id) {
      HTTP.get(`remedio/${id}`).then(response => {
        this.remedio = response.data
      }).catch(error => {
        this.voltar()
      })
    }
    else{
      this.novo()
    }
  },
  methods: {
    voltar() {
      RouterUtils.push(this, { path: '/farmacia/remedio', query: { restore: 'true' }})
    },
    novo(){
      this.remedio = {...REMEDIO_DEFAULT}
      this.$v.$reset()
    },
    salvar(novo){
      if (this.$v.remedio.$invalid) {
          Notificacao.showError('Verifique os campos do formulário')
          return
        }
      HTTP.post('remedio', this.remedio).then(response => {
        Notificacao.showInfo('Registro gravado')
        if (novo){
          this.novo()
          RouterUtils.replace(this, `/farmacia/remedio/form/`)
        } else {
          this.remedio = response.data
          RouterUtils.replace(this, `/farmacia/remedio/form/${this.remedio.id}`)
        }

      }, error => {
          if(error.response.status == 404){
            this.voltar()
          }
      })
    }
  }
}
</script>

<style>

</style>