8man

Laravel: Uncaught TypeError

Posted 11 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) } } }

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

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.