Vue.js Aufruffunktion für eine gerenderte Komponente

Question

Ich möchte ein interaktives Scrumboard erstellen, das Laravel und Vue.js mit mehreren Spalten und innerhalb dieser Spalten mehrere Tickets verwendet.

Diese Tickets sind Vue-Komponenten mit einigen netten Bearbeiten/Löschen/(Un) zuweisen Entwickler-Funktionalität und wird auch auf anderen Seiten verwendet.

Ich habe mehrere Spalten wie folgt definiert:

 <div id="scrumboard"> 
      <div class="scrumboard__column"> 
       <div class="scrumboard__title">Open</div> 
       <div class="scrumboard__tickets_wrapper" data-status="open"> 
        @if($sprint->hasTicketsOfStatus("open")) 
         @foreach($sprint->getTicketsByStatus("open") as $ticket) 
          <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket> 
         @endforeach 
        @endif 
       </div> 
      </div> 
      <div class="scrumboard__column"> 
       <div class="scrumboard__title">In progress</div> 
       <div class="scrumboard__tickets_wrapper" data-status="progress"> 
        @if($sprint->hasTicketsOfStatus("progress")) 
         @foreach($sprint->getTicketsByStatus("progress") as $ticket) 
          <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket> 
         @endforeach 
        @endif 
       </div> 
      </div> 
      <div class="scrumboard__column"> 
       <div class="scrumboard__title">Finished</div> 
       <div class="scrumboard__tickets_wrapper" data-status="closed"> 
        @if($sprint->hasTicketsOfStatus("closed")) 
         @foreach($sprint->getTicketsByStatus("closed") as $ticket) 
          <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket> 
         @endforeach 
        @endif 
       </div> 
      </div> 
     </div> 

Und wie man sehen kann es ein Ticket-Komponente für jedes Ticket macht findet es für jede Spalte.

Nein, ich habe die scrumboard__tickets_wrapper divs in jquery ui sortierbare Listen, die Sie die Tickets zwischen den Spalten tauschen können gedreht.

<script> 
    $(document).ready(function(){ 

     $(".scrumboard__tickets_wrapper").sortable({ 
      connectWith: '.scrumboard__tickets_wrapper', 
      receive: function(event, ui){ 
       console.log("Switched columns"); 
       console.log(event); 
       console.log(ui); 
       var target = $(event.target); 
       target.css("background-color", "#ff0000"); 
      } 
     }); 
</script> 

Alles funktioniert so weit, jetzt meine Frage: Wie dynamisch nenne ich das „update()“ Funktion auf einem Ticket-Komponente, sobald das Ticket in eine andere Liste gestrichen wird?

Wie Sie sehen können, kann ich das spezifische Element, das gelöscht wird, und die sortierbare Liste, in die es fallen gelassen wurde, erhalten. Also ich weiß, was der neue Status ist, indem Sie die Data-Status-Eigenschaft des Wrappers greifen + Ich weiß, welches Element wurde gelöscht.

Aber wie greife ich die Instanz der fraglichen Ticket-Komponente und rufen Sie die Funktion updateStatus auf, um den neuen Status zu speichern?

Vielen Dank im Voraus!

Screenshot of the scrumboard

Answer 1

Dank David für mich in der richtigen Richtung. Die Lösung für mein Problem war eine korrekte Komponentenverschachtelung.

Die Lösung bestand darin, 3 Komponenten mit der richtigen Kindkomponenten-Vererbung zu erstellen. Und deklariert die Kind-Komponenten in der Vorlage ihrer Eltern.

Auf diese Weise endet ich nur erklären "" und die Magie passiert: D.

So habe ich gemacht 3 Komponenten: - ScrumBoard> nimmt scrumboardColumn als Komponente - scrumboardColumn> nimmt Ticket als Komponente - Ticket

Die Wurzel vue Instanz auch das Ticket Komponente lädt, da die Ticket-Komponente auch verwendet wird, auf der Backlog-Seite.

Ich habe das Endprodukt nicht vollständig fertiggestellt, aber ich habe das sortierbare Arbeiten, indem ich es aus der Ready-Funktion der scrumboardColumn-Komponente aufgerufen habe, wie David vorgeschlagen hat.

Hoffe das hilft jemandem in der Zukunft!