Vue.js Динамический компонент не создан, но отображается в консоли

#javascript #vue.js #vuejs2

Вопрос:

Это мой простой график.дочерний компонент vue

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

Вот как я возвращаю его в Props

 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')
  },

Я вызываю этот компонент SimpleFlowchart.vue только в App.vue
Здесь я принял решения в качестве реквизита в сцене

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

Вот результат, который я получаю в консоли, это реквизит, который я передал в app.vue, который я получаю в консоли

Это мой консольный вывод, который я передал в app.vue prop Пожалуйста, нажмите на следующую ссылку, чтобы открыть изображение

https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7

1. Было бы намного проще помочь вам, если бы вы могли воссоздать свою проблему, например, с помощью codesandbox.io Что касается меня, я не совсем уверен, какой компонент имеет какую функцию и что именно не работает. Вы установили Vue devtools? Работает ли ваша adddecision функция, например, увеличена ли длина массива?

2. Да, длина массива увеличивается

3. Длина массива увеличивается, Брат, вот ссылка на это, я буду очень полезен, если ты поможешь мне с этим @Matthias gyazo.com /…

Ответ №1:

Пожалуйста, попробуйте использовать deepCopy для изменения ссылки:

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

Ответ №2:

Проблема заключалась в том, что я не привязывал его к компоненту flowchartdecision, когда я привязывал, он работал нормально, и я вызывал его в другом компоненте, поэтому он не работал нормально