I have encountered a specific issue. Within my Vue component, I have set up an event trigger for when an item is added or removed from a list.
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
@Prop() private idCount: number = 0;
@Prop() private toDos: ToDo[] = new Array<ToDo>();
@Prop() private toDoText: ToDoText = new ToDoText();
public NewToDo() {
let element = document.getElementById("NewToDoName") as HTMLInputElement;
let name = element.value;
element.value = "";
var toDo = new ToDo();
toDo.name = name;
toDo.id = ++this.idCount;
this.toDos.push(toDo);
this.$emit('scrollChange');
}
public DeleteToDo(index: number) {
this.toDos.splice(index, 1);
this.$emit('scrollChange');
}
}
In response to this event within the parent component:
<HelloWorld msg="Welcome to your ToDo-App" v-on:scrollChange="onChanged()" class="jumbotron"/>
This is the method implemented:
onChanged(){
this.canScroll = true;
return true;
}
The property canScroll is linked to another child component:
<NavBarBottom v-bind:canScroll="canScroll"/>
Containing the following logic:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" v-bind:class="[!isFixed ? 'fixed-bottom' : 'bottom']">
export default class NavBarBottom extends Vue {
@Prop() public canScroll : Boolean = false;
@Prop() public isFixed : Boolean = false;
@Watch('canScroll')
onChange(){
//this.isFixed = this.hasVerticalScroll(undefined);
console.log(this.isFixed);
}
private hasVerticalScroll(node : any){
//some checks
}
}
Initially, everything functions properly upon firing the event.
https://i.sstatic.net/zdV7l.png
However, upon adding another item to the array in the HelloWorld-Component, nothing occurs. Upon inspecting the debugger, it appears that the component state has been reset like so:
https://i.sstatic.net/Fqit4.png
Could someone provide insight into why this behavior is happening?
Thank you for any assistance!