时间戳

首页 > 解决方案 > Vue.js 动态组件未创建但显示在控制台中

javascript - Vue.js 动态组件未创建但显示在控制台中

问题描述

这是我的 SimpleFlowchart.vue ChildComponent 

 <FlowchartDecision v-bind.sync="decision" 
      v-for="(decision, index) in scene.decisions" 
      :key="`decision${index}`"
      :options="nodeOptions">
    </FlowchartDecision>

这就是我在道具中返回它的方式

Props:{
     scene:{
      decisions: [
            {
              id: '',
               x: '',
               y: '',
               type: '',
               label: '',
              }
            ],
       decisions:[],
    }
}

这是我的adddecision函数方法

 adddecision(y,nid,x){
    this.scene.decisions.push({
          id: '',
          x: '',
          y: '',
          type: '',
          label: '',
      })
     console.log(this.scene.decisions);
}

这是我的父组件

我在这里做这个

 <button  @click="adddecision()">+</button>

这就是我在 ParentComponent 中发出这个的方式，即 FlowchartDecision.vue

   adddecision(){
    this.$emit('adddecision')
  },

我只是在 App.vue 中调用这个 SimpleFlowchart.vue 组件在这里我已经通过决策作为场景中的道具

       decisions:[
   {
      id:10,
      x:-1000,
      y:170,
      type:'asad',
      label:'bilal'
   }
 ],

这是我在控制台中获得的输出这是我在 app.vue 中传递的道具，我在控制台中获得

这是我在 app.vue prop 中传递的控制台输出请点击以下链接打开图片

https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7

标签： javascriptvue.jsvuejs2

解决方案

问题是当我绑定它时我没有将它与流程图决策组件绑定它工作正常，我将它自己称为另一个组件，这就是为什么它不能正常工作

推荐阅读