Laravel: Uncaught TypeError

Published 8 months ago by 8man

Hello, I'm new to laravel and followed this tutorial and created a add, edit, and delete app with laravel, all of them are fine except add. When i add a item for the first time it gets added but when i add a second item these error appears:

Uncaught TypeError: Cannot use 'in' operator to search for 'name' in at Proxy.set (app.js:2098) at input (app.js:43616) at invoker (app.js:3062) at HTMLInputElement.fn._withTask.fn._withTask (app.js:2860) 3app.js:2098 Uncaught TypeError: Cannot use 'in' operator to search for 'number' in at Proxy.set (app.js:2098) at input (app.js:43651) at invoker (app.js:3062) at HTMLInputElement.fn._withTask.fn._withTask (app.js:2860) 10app.js:2098 Uncaught TypeError: Cannot use 'in' operator to search for 'name' in at Proxy.set (app.js:2098) at input (app.js:43616) at invoker (app.js:3062) at HTMLInputElement.fn._withTask.fn._withTask (app.js:2860) 17app.js:2098 Uncaught TypeError: Cannot use 'in' operator to search for 'email' in at Proxy.set (app.js:2098) at input (app.js:43686) at invoker (app.js:3062) at HTMLInputElement.fn._withTask.fn._withTask (app.js:2860) phonebook Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

Here is the code for adding a item:

Add New Entry

<section class="modal-card-body">
  <div class="field">
    <label class="label">Name</label>
      <div class="control">
        <input class="input" :class="{'is-danger':errors.name}" type="text" placeholder="Name" v-model="list.name">
      </div>
      <small v-if="errors.name" class="has-text-danger">{{ errors.name[0] }}</small>
  </div>

  <div class="field">
    <label class="label">Number</label>
      <div class="control">
        <input class="input" :class="{'is-danger':errors.number}" type="number" placeholder="Number" v-model="list.number">
      </div>
      <small v-if="errors.name" class="has-text-danger">{{ errors.number[0] }}</small>
  </div>

  <div class="field">
    <label class="label">Email</label>
      <div class="control">
        <input class="input" :class="{'is-danger':errors.email}" type="email" placeholder="Email" v-model="list.email">
      </div>
      <small v-if="errors.name" class="has-text-danger">{{ errors.email[0] }}</small>
  </div>

</section>
<footer class="modal-card-foot">
  <button class="button is-success" @click='save'>Save</button>
  <button class="button" @click='close'>Cancel</button>
</footer>
export default{ props:['openmodal'], data(){ return{ list:{ name:'', number:'', email:'' }, errors:{} } }, methods:{ close(){ this.$emit('closeRequest') }, save(){ axios.post('/phonebook',this.$data.list).then((response)=> { this.close() this.$parent.lists.push(response.data) this.$parent.lists.sort(function(a,b){ if(a.name > b.name) { return 1; }else if(a.name < b.name){ return -1; } }) this.list = "" }) .catch((error) => this.errors = error.response.data.errors) } } }
tykus
tykus
8 months ago (659,430 XP)

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

This points to a ValidationException; what validation rules do you have and how does the second request compare with the first in the context of these rules?

Please sign in or create an account to participate in this conversation.