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

【问题标题】：Vue.js Component loss state after event was triggerdVue.js 组件在事件触发后丢失状态
【发布时间】：2019-01-13 12:19:56
【问题描述】：

我有以下问题。在我的 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 的数组中再次添加一个项目时，什么也没发生。当我查看调试器时，组件状态是这样删除的：

有人能解释一下为什么会这样吗？

感谢您的帮助！

【问题讨论】：

标签： javascript typescript vue.js vuejs2 vue-component

【解决方案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;

【讨论】：