【问题标题】:Vue.js Dynamic Component is no Created but showing in ConsoleVue.js 动态组件未创建但显示在控制台中
【发布时间】:2019-03-07 23:02:20
【问题描述】:

这是我的 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 属性中传递的控制台输出 请点击以下链接打开图片

https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7

【问题讨论】:

  • 如果您可以重新创建您的问题,那么帮助您会更容易,例如codesandbox.io 对我来说,我不太确定哪个组件具有哪个功能以及哪些功能不起作用。你安装了 Vue 开发工具吗?您的 adddecision 功能是否有效,例如数组长度增加了吗?
  • 是的,数组长度在增加
  • 数组长度在增加兄弟这里是链接如果你帮我解决这个问题我会非常有帮助@Matthias gyazo.com/…

标签: javascript vue.js vuejs2


【解决方案1】:

请尝试使用 deepCopy 更改参考:

adddecision(y,nid,x){
   this.scene.decisions.push({
         id: '',
         x: '',
         y: '',
         type: '',
         label: '',
     })
   this.scene = JSON.parse(JSON.stringify(this.scene))
}

【讨论】:

  • 问题是我没有通过将它与流程图决策组件绑定
【解决方案2】:

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

【讨论】:

    猜你喜欢
    • 2023-02-13
    • 1970-01-01
    • 2021-07-17
    • 2019-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-23
    • 2022-01-21
    相关资源
    最近更新 更多