我有以下问题。在我的Vue组件中,当一个项目被添加或从列表中删除时,我触发了一个事件。
导出默认类helloworld扩展vue{
@prop()私人消息!弦;
@prop()私有ID计数:数字=0;
@prop()private todos:todo[]=新数组<todo>();
@prop()private todotext:todotext=new todotext();
公共newtto()。{
let element=document.getElementByID(“newtoname”)作为htmlinputElement;
让name=element.value;
element.value=“”;
var todo=新todo();
todo.name=名称;
todo.id=++this.idCount;
推(todo);
这个。$emit(“ScrollChange”);
}
public deletetoo(索引:数字){
this.todos.splice(索引,1);
这个。$emit(“ScrollChange”);
}
}
< /代码>
所以在我的父组件中,我对这个事件做出反应
<helloworld msg=“welcome to your todo app”v-on:scrollChange=“onChanged()”class=“jumbotron”/>gt;
< /代码>
这是我的方法
onchanged()。{
this.canScroll=真;
回归真实;
}
< /代码>
属性canScrollis binded to another child component
<navBarBottom v-bind:canScroll=“canScroll”/>
< /代码>
我的逻辑是什么
<nav class=“navbar navbar expand lg navbar dark bg dark”v-bind:class=“[!是固定的?”固定底端“:'底端']”>
导出默认类NavBarBottom扩展Vue{
@prop()public canscroll:boolean=false;
@prop()public是固定的:boolean=false;
@手表(canscroll)
OnCube(){
//this.isFixed=this.HasVerticalScroll(未定义);
console.log(this.is fixed);
}
专用hasVerticalScroll(节点:any){
/一些支票
}
}
< /代码>
所以如果我第一次炒了这件事,一切都会好起来的。
但当我再次在helloworld组件中向我的数组添加一个项时,nothing happend。当我在调试程序中查找时,组件状态是“删除”,如下所示:
有人能解释一下为什么会发生这种事吗?
为了帮助!
所以在我的父组件中,我对这个事件做出反应
<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什么都没有发生。当我在调试器中查找时,组件状态如下所示删除:
有人能解释一下为什么会发生这种事吗?
为了帮助!
