$ emittiert ein Ereignis vom Kind zum Elternkomponente Vue 2

Question

Ich bin neu in JS und Vue, so bitte Geduld mit mir :)

Ich habe eine Tabelle, die Vue-Komponenten unter Verwendung von zwei, die ein Elternteil wiedergegeben wird (das Tabelle - Bestellungen) und Kind (die Zeile - Bestellung).

Es gibt eine Schaltfläche, die für jede Zeile der Tabelle gedrückt werden kann, die einen AJAX für diese Zeile ausführt, aber ich muss auch die Tabelle (übergeordnet) aktualisieren, wenn die Aktion ausgeführt wird, damit es aktualisiert wird Daten.

Ich denke, ich muss $ emit im Kind verwenden, um die Aktion an die Eltern weiterzugeben, aber ich kann es nicht zum Funktionieren bringen. Hier ist der Code (Entschuldigung, es ist lang, ich habe alles entfernt, was nicht wichtig ist);

const order = { 
    template: ` 
     ...// table content 
     <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
             selectedOption)">Set Advisor</button></td> 
    `, 

    methods: { 
     // following is the method that is run when the button is pressed 

     assignAdvisor(id, selectedOption) { 
      axios.post('url').then(response => { 
       ..// show response message 
       orders.$emit('refreshAfterUpdate'); // also tried 
                // this.$parent.$emit(...) 
      })  
    }, 
}; 

const orders = { 
    components: { order, }, 

    props: { 
     orders: { 
      type: Object, 
     }, 
    }, 

    mounted() { 
     // this is basically the code that I need to re-run when button is pressed, 
     // which I have repeated below in a method 
     var refresh =() => { 
      axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       setTimeout(refresh, 5000); 
      }); 
     } 
     refresh(); 
    }, 

    methods: { 
     refreshAfterUpdate() { 
      axios.get('/admin/ajax/unassigned-orders') 
      .then(response => { 
      this.ordersData = response.data; 
      console.log(response); 
      }); 
     }, 
    } 
}; 

new Vue({ 
    render(createElement) { 
     const props = { 
      orders: { 
       type: Object, 
      }, 
     }; 
     return createElement(orders, { props }); 
    }, 
}).$mount('#unassignedOrders'); 

Ich bekomme keine Fehlermeldung oder irgendetwas - es funktioniert einfach nicht.

Dank

Answer 1

OK so dank @Patrick Steele ich es herausgefunden haben.

Ich habe $ on - oops nicht benutzt.

Added Code in das eingehängte() Abschnitt und es funktioniert jetzt:

const order = { 
    template: ` 
     ...// table content 
     <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
             selectedOption)">Set Advisor</button></td> 
    `, 

    methods: { 
     // following is the method that is run when the button is pressed 

     assignAdvisor(id, selectedOption) { 
      axios.post('url').then(response => { 
       ..// show response message 
       orders.$emit('refreshAfterUpdate'); // also tried 
                // this.$parent.$emit(...) 
      })  
    }, 
}; 

const orders = { 
    components: { order, }, 

    props: { 
     orders: { 
      type: Object, 
     }, 
    }, 

    mounted() { 
     // this is basically the code that I need to re-run when button is pressed, 
     // which I have repeated below in a method 
     var refresh =() => { 
      axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       setTimeout(refresh, 5000); 
      }); 
     } 
     refresh(); 

      $this.on('refreshAfterUpdate',() => { 
       axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       console.log(response); 
       }); 
      }, 
     }, 
    }, 


}; 

new Vue({ 
    render(createElement) { 
     const props = { 
      orders: { 
       type: Object, 
      }, 
     }; 
     return createElement(orders, { props }); 
    }, 
}).$mount('#unassignedOrders');