Good day everyone,
I am fairly new to working with vue.js and unfortunately don't have anyone in my environment which I could ask for help. Currently I am trying to fix a few bugs in an existing project and got stuck on a rather simple task.
My current fix is aiming to reduce the variable that saves an array.length after a @click of a button has been made. I've already established the connection between the child and parent components and am now looking to somehow save the array.length in a variable to then reduce/increase it everytime the button is clicked.
The attempts to declare the variable in props or data did not show the expected result so far.
tl;dr: I want to declare var a = this.allRootItems.length; somewhere in the code in order to manipulate it in the method calcDeduction() in order to display it through the prop function heading(). The current code does not seem to solve that.
A few snippets of the relevant code (I am able to provide more if necessary):
data() {
return {
showItems: false,
progress: 0,
a: 0,
};
computed: {
...
heading() {
var a = this.allRootItems.length;
var text = this.section.heading+" ("+this.progress+"/"+a+")";
return text;
},
...
allRootItems() {
var result = [];
if (this.checklistid==null) {
return result;
}
var rootItems = this.findRootItemsInStore({ query:{
sectionId: this.section.id
} }).data;
for (var i=0; i<rootItems.length; i++) {
var itemToDo = this.findCheckItemsInStore({ query:{
checklistId: this.checklistid,
rootitemId: rootItems[i].id
} }).data[0];
if (itemToDo) {
if (itemToDo.isTodo) {
result.push(rootItems[i]);
}
}
}
return result;
},
...
methods: {
...
calcDeduction(dedValue) {
if (dedValue==-1) { //-1 and 1 are being swapped on each toggle of the button
this.a--;
}
if (dedValue==1) {
this.a++;
}
console.log(this.a);
}
}