[英]Vue.js Dynamic Component is no Created but showing in Console
This is my SimpleFlowchart.vue ChildComponent 这是我的SimpleFlowchart.vue子组件
<FlowchartDecision v-bind.sync="decision"
v-for="(decision, index) in scene.decisions"
:key="`decision${index}`"
:options="nodeOptions">
</FlowchartDecision>
This is how i am returning it in Props 这就是我在道具中归还的方式
Props:{
scene:{
decisions: [
{
id: '',
x: '',
y: '',
type: '',
label: '',
}
],
decisions:[],
}
}
This is my adddecision function method 这是我的adddecision函数方法
adddecision(y,nid,x){
this.scene.decisions.push({
id: '',
x: '',
y: '',
type: '',
label: '',
})
console.log(this.scene.decisions);
}
This is my Parent Component 这是我的父组件
here i am doing this 在这里我正在这样做
<button @click="adddecision()">+</button>
This is how i am Emitting this in ParentComponent which is FlowchartDecision.vue 这就是我如何在FlowchartDecision.vue的ParentComponent中发出此消息
adddecision(){
this.$emit('adddecision')
},
I am only Calling this SimpleFlowchart.vue Component in App.vue Here i have passed decisions as a prop in scene 我仅在App.vue中调用此SimpleFlowchart.vue组件。在这里,我已通过决策作为场景中的道具
decisions:[
{
id:10,
x:-1000,
y:170,
type:'asad',
label:'bilal'
}
],
Here is the Output which i am getting in the Console this is the prop that i have passed in app.vue which i am getting in console 这是我在控制台中获得的输出,这是我在app.vue中传递的道具,我在控制台中获得了
This is my Console output which i have passed in app.vue prop Please Click on the following link to open the image 这是我已传入app.vue prop的控制台输出,请单击下面的链接打开图像
https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7 https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7
Please try using deepCopy to change reference: 请尝试使用deepCopy更改参考:
adddecision(y,nid,x){
this.scene.decisions.push({
id: '',
x: '',
y: '',
type: '',
label: '',
})
this.scene = JSON.parse(JSON.stringify(this.scene))
}
问题是当我绑定它时,我没有将其与流程图决策组件绑定,而我自己将其称为另一个组件,这就是为什么它无法正常工作的原因
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.