Vuejs - Cannot read property '_withTask' of undefined

user_5838631 0
Viewed 4267

I am trying to add new html to my div after pressing a button, using v-for.
But after I press the button I get this error and the element (article) gets added to the div once but after that it won't work anymore.

vue.js?3de6:1743 TypeError: Cannot read property '_withTask' of undefined
at remove$2 (eval at (app.js:561), :7078:13)
at updateListeners (eval at (app.js:561), :2067:7)
at Array.updateDOMListeners (eval at (app.js:561),:7091:3)
at patchVnode (eval at (app.js:561), :5918:62)
at updateChildren (eval at (app.js:561), :5809:9)
at patchVnode (eval at (app.js:561), :5923:29)
at updateChildren (eval at (app.js:561), :5809:9)
at patchVnode (eval at (app.js:561), :5923:29)
at updateChildren (eval at (app.js:561), :5809:9)
at patchVnode (eval at (app.js:561), :5923:29)

HTML CODE : 

<article v-for="item in range">
    <span>
        {{item[0]}} - {{item[1]}}
    </span>
    <span>
        <button  class="btn btn-theme btn-default btn-xs pull-left"  @click="deleteItem" ><i class="fa fa-times inline"></i></button>
    </span>
</article>

JS :

data() {
    return {
        majornew:this.major,
        certificate:this.cert,
        range:[], 
        item:[],
    };
},

methods: {
    addmajorcert(majortext,certext) {
        this.item = [majortext,certext];
        this.range.push(this.item);
        console.log(majortext,certext);
    },
},

Updated :There are two select boxes where values get sent

<v-select v-model="selectedmajor" label="major_text" id="major" name="majornew" :options="majornew" >
</v-select> 
<v-select v-model="selectedcert" :options="certificate" label="lc_text" id="cert" v-on:click="certificate"></v-select> 

<button v-on:click="addmajorcert(selectedmajor,selectedcert)">
    +
</button>

The select box returns an object like :

{ "major_id": 2, "major_text": "industrial", "number_of_used": 1 }

When I do a console.log I can see the values being passed.

vuejs2 vue.js javascript
3 Answers

I had same problem and that was because i am using an event but it was not defined in script here is example problem :

<template>
 <div>
  <button @click="deleteItem"></button>
 </div>
</template>

So you can see i am using deleteItem method but in scripts below methods object i have no function with that name. and that causing me error _withTask. I think this can someone else.

<script>
 export default {
  methods: {
   // No function with name deleteItem
  }
 }
</script>

Basically the error is caused when an event function's is undefined in simple language :)

user_12857790

here is my try,
code in link


code in photo


Tell me if there is something that you do not understand or if I miss something.

user_88448790 
<article v-for="item in range">

You have both range and item defined in your data, yet you loop over range and name each iteration item. Not sure but it could be problematic, try to change the name of your item in your v-for :

<article v-for="majorcert in range">

By the way I think you need a v-key when using v-for, it could be :

<article v-for="majorcert in range" :key="majorcert.major_id">
user_72008980
Related