Clash Royale CLAN TAG#URR8PPP

Vue.js Component loss state after event was triggerd

I have the following problem. In my vue-component i triggerd a event when a item was 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');




So in my parent component i react to this event

<HelloWorld msg="Welcome to your ToDo-App" v-on:scrollChange="onChanged()" class="jumbotron"/>


And this is my method

onChanged()
this.canScroll = true;
return true;



The property canScroll is binded to another child component

canScroll

<NavBarBottom v-bind:canScroll="canScroll"/>


Where I have this 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




So if i fire the event for the firsttime everything is fine.

But when I add again a Item to my array in the HelloWorld-Component nothing happend. When I look in the debugger the component state is delete like this:

HelloWorld-Component

Can someone explain me why this happends?

Thx for the help!

1 Answer
1

As shown in the usage of @Prop (vue-property-decorator) I believe that the way that the prop is set could be causing this issue. Please try to use default: x instead of defining the initial value.
So your code would looks like:

default: x

@Prop() private msg!: string;
@Prop( default: 0 ) private idCount: number;
@Prop( default: new Array<ToDo>() ) private toDos: ToDo;
@Prop( default: new ToDoText() ) private toDoText: ToDoText;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.