javascript - Vuejs - Cannot read property '_withTask' of undefined - Stack Overflow

admin管理员组

文章数量:1287882

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.

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.

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Sep 20, 2018 at 13:47 Rence 2,95033 gold badges2626 silver badges4444 bronze badges asked Sep 20, 2018 at 12:40 Pc MonkPc Monk 8522 gold badges55 silver badges2424 bronze badges 4

• Where's the add button? – dziraf Commented Sep 20, 2018 at 12:44
• range its an empty array at the beginning till we push an array into it and after i push the array i get the error – Pc Monk Commented Sep 20, 2018 at 12:51
• the options are strings , and its an object not an array , how can i setup a runnable example with vue when im stuck :( – Pc Monk Commented Sep 20, 2018 at 13:28
• 2 Well if I make an example for what you describe, I do not have the error. So obviously the error must be in a part of the code you do not show: jsfiddle/Sirence/w6fb1v2c/3 Your first step should be to set up a small example yourself where the error is visible with your data, so others can try and help you. – Rence Commented Sep 20, 2018 at 13:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 :)

here is my try,

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

<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">

本文标签： javascriptVuejsCannot read property 39withTask39 of undefinedStack Overflow