Vue.jsレンダリングされたコンポーネントで関数を呼び出す

Question

LaravelとVue.jsを使用して複数の列を含み、それらの列内に複数のチケットを含む対話型スクランブルボードを作成したいと考えています。

これらのチケットはvueコンポーネントであり、開発者の編集/削除/（un）割り当て機能があり、他のページでも使用されます。

私はこのように定義された複数の列があります。

 <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> 

そして、あなたはそれが列ごとに検出した各チケットのチケットコンポーネントを描画見ることができるように。

いいえ、scrumboard__tickets_wrapper divをjquery uiソート可能なリストに変更していないので、列間でチケットを入れ替えることができます。

<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> 

すべてがこれまでに取り組んでいる、今、私の質問は：チケットは別のリスト内に落下されると、どのように私は動的にチケットコンポーネントの「UpdateStatusを（）」関数を呼び出していますか？

ご覧のとおり、特定の要素が削除され、ソート可能なリストがドロップされてしまいます。だから私は新しい状態がラッパーのデータステータスプロパティをつかむことによって+どの要素が削除されたか知っていることを知っています。

しかし、問題のチケットコンポーネントのインスタンスを取得し、updateStatus関数を呼び出して新しいステータスを保存するにはどうすればよいですか？

ありがとうございます！

Screenshot of the scrumboard

Answer 1

正しい方向に私を指してくれてありがとうデビッド。私の問題に対する解決策は、適切なコンポーネントネストでした。

解決策は、適切な子コンポーネント継承を持つ3つのコンポーネントを作成することでした。親のテンプレート内の子コンポーネントを宣言します。

このようにして ""宣言するだけで、魔法が起こります：D。

だから加えた3つの成分： - scrumboard>成分としてscrumboardColumnかかり - scrumboardColumn>かかる成分 としてチケット - ルートVUEインスタンスはまた、チケット・コンポーネントをロード

チケットチケット成分も使用されているのでバックログページで

私は最終製品を完全には完成していませんが、DavidさんのようにscrumboardColumnコンポーネントの準備機能の中から呼び出すことで、ソート可能な作業ができました。

これは将来的に誰かに役立つことを願っています！