Vue.js Функция вызова на визуализированном компоненте

Question

Я хочу создать интерактивную scrumboard с использованием 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> 

И как вы можете видеть, что делает компонент билета для каждого билета он находит для каждого столбца.

Нет, я превратил div-scrumboard__tickets_wrapper в список сортировки 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 (» функции на компоненте билета после того, как билет опускают в другой список?

Как вы можете видеть, я могу получить удаляемый конкретный элемент и отсортированный список, в который он был помещен. Поэтому я знаю, что нового статуса, захватив свойство data-status обертки +, я знаю, какой элемент был удален.

Но как я могу захватить экземпляр рассматриваемого компонента билета и вызвать функцию updateStatus для сохранения нового статуса?

Заранее благодарен!

Screenshot of the scrumboard

Answer 1

Спасибо Давид указал мне в правильном направлении. Решение моей проблемы было правильной компоновкой компонентов.

Решение состоит в том, чтобы создать 3 компонента с надлежащим наследованием дочерних компонентов. И объявление дочерних компонентов в шаблоне его родителя.

Таким образом, я в конечном итоге объявляю «», и происходит волшебство: D.

Так что я сделал 3 компонент: - scrumboard> принимает scrumboardColumn как компонент - scrumboardColumn> берет билет в качестве компонента - билет

Экземпляр корня ви также загружает компонент билетов, поскольку также используются компонент билета на странице отставания.

Я не полностью закончил конечный продукт, но я получил отсортированную работу, вызвав ее из готовой функции компонента scrumboardColumn, такого как Дэвид.

Надеюсь, это поможет кому-то в будущем!