Vuejs-无法读取未定义的属性'_withTask'

时间:2018-09-20 12:40:50

标签: javascript vue.js vuejs2

我尝试使用v-for在按下按钮后向div中添加新的html。
但是,当我按下按钮后,我得到了这个错误,并且元素(文章)被添加到div中一次,但是之后就不再起作用了。

  

vue.js?3de6:1743 TypeError:无法读取未定义的属性'_withTask'
      at remove $ 2(eval at(app.js:561),:7078:13)
      在updateListeners(在(app.js:561),:2067:7处评估)
      在Array.updateDOMListeners(在(app.js:561),: 7091:3处评估)
      在patchVnode(在(app.js:561),:5918:62处评估)
      在updateChildren(在(app.js:561),:5809:9处评估)
      在patchVnode(在(app.js:561),:5923:29处评估)
      在updateChildren(在(app.js:561),:5809:9处评估)
      在patchVnode(在(app.js:561),:5923:29处评估)
      在updateChildren(在(app.js:561),:5809:9处评估)
      在patchVnode处(在(app.js:561),:5923:29处评估)

HTML代码:

<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);
    },
},

已更新:有两个选择框,用于发送值

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

选择框返回一个对象,如:

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

当我执行console.log时,我可以看到正在传递的值。

3 个答案:

答案 0 :(得分:3)

我有同样的问题,那是因为我正在使用一个事件,但未在脚本中定义,这里是示例问题:

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

所以您可以看到我正在使用deleteItem方法,但是在method对象下面的脚本中,我没有使用该名称的功能。那导致我错误_withTask。我认为其他人也可以。

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

未使用简单语言定义事件时的基本错误原因:)

答案 1 :(得分:2)

这是我的尝试,
code in link


code in photo


告诉我是否有您不理解的事情,或者我错过了什么。

答案 2 :(得分:1)

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

您已经在数据中定义了范围和项目,但是您遍历了范围并为每个迭代项目命名。 不确定,但可能有问题,请尝试在v-for中更改商品名称:

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

以我认为使用v-for时需要一个v键的方式,它可能是:

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