I am attempting to dynamically add new HTML elements to my div upon button click, using v-for. However, I encounter an issue where the element (article) is added successfully on the first click, but subsequent clicks result in an error.
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 }
Upon using a console.log, I can observe the values being passed successfully.