We Keep Coding

Array is undefined from Veux Store

I am retrieving data from the Vuex Store. I first of all want to check of the array is present in the Vuex Store, after that I want to check if the noProducts object at index 0 is not present.
The reason for this is that tweakwiseSortedProducts is used for both products and a no Products boolean to react to in the front-end
tweakwiseHasProducts () {
if (this.$store.state.tweakwise?.tweakwiseSortedProducts) {
return (
this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
false
);
}
return false;
},
My front-end currently, often, returns:
this.$store.state.tweakwise.tweakwiseSortedProducts[0] is undefined
In the console.

This happens because tweakwiseSortedProducts is not undified but an empty list. You can try:
tweakwiseHasProducts () {
if (this.$store.state.tweakwise?.tweakwiseSortedProducts?.length !== 0) {
return (
this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
false
);
}
return false;
},
or just:
tweakwiseHasProducts () {
return this.$store.state.tweakwise?.tweakwiseSortedProducts[0]?.noProducts === false;
},
which will be false if any of this elements is undefined, or true if noProducts is really false

It is recommended to use getter when calling a value in Vuex.
Please refer to the following.
getters: {
getTweakwiseSortedProducts: (state: any) => {
return state.tweakwise?.tweakwiseSortedProducts || [];
},
},
tweakwiseHasProducts () {
this.$store.getters.getTweakwiseSortedProducts.length ? true : false;
}

Javascript method to be able see if a value changes without re rendering the page

I am trying to be able to read a value that is boolean to see if a user did a specific action or not and I am using the ReactJS functional component style. I am trying to read the runValue in my code to see if the run() method changed the value and I want to be able to read this value without recalling the function.
I want to be able to put in my useEffect method this line of code;
Run.RunFunction().run((index) => {
if (index) {
\\\ do stuff here if index is true
} else {
///if index is false
}
}
my code
const Run = {
RunFunction: () => {
let runValue = false;
return {
run() {
runValue = true
},
listener: function(val) {},
checkStatus: function(listen) {
this.listener = listen
}
}
},
}
Run.RunFunction().checkStatus((index) => {
if (index) {
console.log('running')
} else {
console.log('not running')
}
});
I am having trouble having this code to work and I want to be able to see the value of the runValue initially and if it changes.
Thank you

Dynamic state is not getting updated in react

I am new to react js , here
this.state = {
technologies: [],
showLowError: false,
showHighError: false,
showMediumError: false
}
I have this state variables.
Now,
What I am trying to do is ,
if(type === "Low") {
errorState = "showLowError";
} else if(type === "Medium") {
errorState = "showMediumError";
} else {
errorState = "showHighError";
}
if (tobeupdated === "count") {
let validateData = this.validate(type, noc);
console.log("validateData is ==>", validateData);
this.setState({
[errorState]: validateData
})
}
update the state, depend upon some variables, Now,
[errorState] is not updating the exact value, Value for the state is not getting set.can any one help me with this ?

try adding:
this.setState(this.state);
after:
this.setState({
[errorState]: validateData
})

How to make the following Vue code reactive?

In this code:
handleChangeTab (toName, toIndex) {
this.tabList.forEach((tab, index) => {
tab.active = false
this.$children[index].prefs.active = false
if (tab.name === toName) {
this.$children[toIndex].prefs.active = true
tab.active = true
console.log('tabList', this.tabList)
console.log('this.$children', this.$children)
}
})
},
this.tabList[1].active becomes true when handleChangeTab is triggered. However, this.$children[1] becomes false. I think this.$children[toIndex].prefs.active = true is messing up with Vue's reactive features.
How to fix this? In other words, how to write the reactive version of this.$children[toIndex].prefs.active = true?

You can try to deep copy data:
handleChangeTab (toName, toIndex) {
const tabCopy = JSON.parse(JSON.stringify(this.tabList))
tabCopy.forEach((tab, index) => {
tab.active = false
this.$children[index].prefs = {
...this.$children[index].prefs,
active: false
}
if (tab.name === toName) {
this.$children[index].prefs = {
...this.$children[index].prefs,
active: true
}
tab.active = true
}
})
this.tabList = tabCopy
}
But the better solution is passing props to your children component. Should not change children data directly from parent.

Bootstrap-treeview not setting state with "checkNode" method

I'm trying to update the parents and children checked inputs using bootstrap-treeview, but when I use the method "checkNode", the state of the node doesn't change at all.
var trucks = $('#trucks').treeview({
level: 3,
showCheckbox: true,
selectable: false,
highlightSelected: false,
data: getTree()
}).on('nodeChecked', function (event, node){
var childrenNodes = __getChildren(node);
childrenNodes.forEach(function(n){
$(trucks).treeview('checkNode', [ n.nodeId, { silent: true } ]);
console.log(n.state.checked);
});
});
function __getChildren(node) {
if (node.nodes === undefined) return [];
var childrenNodes = node.nodes;
node.nodes.forEach(function(n) {
childrenNodes = childrenNodes.concat(__getChildren(n));
});
return childrenNodes;
}
The input is checked normally, but console output says the state is "false"
Anyone have an a idea of what I'm doing wrong?