事件触发后Vue.js组件丢失状态

Question

我有以下问题。在我的Vue组件中，添加或从列表中删除项目时触发了一个事件。

  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');
  }
}

所以在我的父组件中，我对此事件做出了反应

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

这是我的方法

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

属性canScroll已绑定到另一个子组件

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

我有这种逻辑的地方

<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
}
}

所以，如果我第一次触发该事件，一切都很好。

但是当我再次向HelloWorld-Component中的数组中添加项目时，什么也没发生。当我在调试器中查看组件状态时，像这样删除：

有人可以解释我为什么会这样吗？

感谢您的帮助！

Answer 1

如@Prop (vue-property-decorator)的用法所示，我认为设置道具的方式可能会导致此问题。请尝试使用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;