Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuejs - Cannot read property '_withTask' of undefined

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.

like image 723
Pc Monk Avatar asked Sep 20 '18 12:09

Pc Monk


People also ask

Why is clients undefined in Vue?

Also, clients is undefined: do you mean this.clients [this.clients.length - 1].id instead? Function scope is most likely the culprit. Use arrow functions instead so this refers to the Vue component.

Why can’t I createapp in VUE 3?

I think the direct cause is that you aren’t passing an argument to createApp. You need to pass an empty object if nothing else. I don’t really understand how the original code worked as I’d have expected the child component to need registering prior to mounting. For Vue 3 you’ll need to use app.component to replace Vue.component.

Is it possible to import Vue from 'Vue'?

Tried to import Vue from ‘vue’ but it doesn’t exist. I tried importing all exported things and log them and found nothing resembling Vue Googled and found this page https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/ and this is how you do it.

How to fix if the root element is undefined?

Guys are right but I can add something. If there is possibility that your root element in the condition can be undefined for some reason, it is good practice to use something like that: v-if='rootElement && rootElement.prop'.


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

like image 71
Mandeep Gill Avatar answered Sep 19 '22 07:09

Mandeep Gill