Podjęcie zmiennej składowej Vue ze strony nadrzędnej, który wywołał to

Question

mam prosty stół, który wyświetla wszystkie moje dane:

główny file.php

<table class="table table-bordered table-hover" id="all-jobs"> 
    <thead> 
     <tr> 
      <th>{{ __('Job Name') }}</th> 
      <th>{{ __('Job Description') }}</th> 
      <th>{{ __('Job Status') }}</th> 
      <th>{{ __('Job Applications') }}</th> 
      <th>{{ __('Manage') }}</th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td class="non_searchable"></td> 
      <td class="non_searchable"></td> 
     </tr> 
    </thead> 
</table> 

<div id="app"> 
    <div id="editJob" class="modal fade in" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <edit-job id=""></edit-job> 
      </div> 
     </div> 
    </div> 
</div> 

Teraz mam guzik edit, który próbuję otworzyć modal edycji dla danego rzędu:

<a href='' data-id='{$job->id}' class='btn btn-xs btn-danger' data-toggle='modal' data-target='#editJob'><i class='fa fa-close'></i></a>"; 

href jest to lokalizacja w jednym z moich tabeli danych, próbuję pa ss że do mojego .vue pliku, dzięki czemu można go używać dla moich get i pisać próśb:

myfile.vue

<template> 
    <div> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h4 class="modal-title">Edit Job</h4> 
     </div> 
     <div class="modal-body"> 
      <form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)"> 
       <!-- Removed code, it's just inputs !--> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-info btn-fill btn-wd" v-on:click="addJob">Save</button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</template> 

<script> 
    export default 
    { 
     props: ['id'], 
     data: function() 
     { 
      return { 
       countries: [], 
       name: '', 
       summary: '', 
       salarytype: '', 
       salaryfrom: '', 
       salaryto: '', 
       location: '', 
       contactemail: '', 
       contactphone: '', 
       errors: new Errors() 
      } 
     }, 

     methods: 
     { 
      addJob: function() 
      { 
       axios.post('/jobs/edit', this.$data) 
       .then(response => { 
        if(response.data.status === true){ 
         $('#editJob').modal('hide'); 
         getJobTable(); 
        } 
        else{ 
         formError = response.data.message; 
        } 
       }) 
       .catch(error => this.errors.record(error.data)) 
      } 
     }, 

     mounted: function() 
     { 
      console.log($(this).data('id')); 
      axios.get('/jobs/my-job/') 
       .then(response => { 
        this.name = response.data.name 
        this.summary = response.data.summary 
        this.salarytype = response.data.salary_type 
        this.salaryfrom = response.data.salary_from 
        this.salaryto = response.data.salary_to 
        this.location = response.data.location 
        this.contactemail = response.data.contact 
        this.contactphone = response.data.phone 
       }) 

      axios.get('/countries') 
       .then(response => { 
        this.countries = response.data; 
       }) 
     } 
    } 
</script> 

Jak mogę obok mojego href id do mojego używać na moją prośbę? Dzięki

MY struktura:

Utworzono-jobs.blade.php

https://pastebin.com/TPBnC1qP

Edit-Job.vue

https://pastebin.com/30UWR5Nn

app.js

https://pastebin.com/1yxZWvVC

tabela tylko zapełnia dane i dodaje rozwijaną tak:

<ul class='icons-list'> 
    <li class='dropdown'> 
     <a href='#' class='dropdown-toggle' data-toggle='dropdown' aria-expanded='false'> 
      <i class='icon-menu9'></i> 
     </a> 

     <ul class='dropdown-menu dropdown-menu-right'> 
      <li> 
       <a data-id='{$job->id}' onclick='getID({$job->id})' data-toggle='modal' data-target='#editJob'> 
        <i class='icon-file-pdf'></i> Edit Job 
       </a> 
      </li> 
      <li> 
       <a href='javascript:void();' data-id='{$job->id}' onclick='deleteJob({$job->id})'> 
        <i class='icon-cross'></i> Delete Job 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

Nie dać wiele informacji o strukturze aplikacji, ale wygląda na to, co używasz najmniej jeden pojedynczy komponent pliku do wyświetlania danych w swoim modalu, który jest w całości wyświetlany za pomocą Bootstrap. Wygląda również na to, że tabela z wartościami id, które chcesz przekazać do Vue, znajduje się poza samą Vue.

W tym przypadku sposób przekazywania danych do pojedynczego komponentu pliku polega na przechwyceniu wartości Vue w zmiennej, a następnie ustawieniu wartości id po kliknięciu łącza w tabeli.

Załóżmy Twój main.js lub app.js wygląda następująco:

import Vue from 'vue' 
import EditJob from './EditJob.vue' 

Vue.component('edit-job', EditJob) 

const app = new Vue({ 
    el: '#app', 
    data:{ 
    id: null 
    } 
}) 

// Add a click handler for the links with the `data-id` property. 
// This is using jQuery (because you are using Bootstrap) but you 
// can do this any way you want. 
$("[data-id]").on("click", function(){ 
    // Set the Vue's data to the data-id property in the link. 
    app.id = this.dataset.id 
}) 

zauważyć jak kod rejestruje wynik new Vue(...) w zmiennej app. Następnie dodałem właściwość danych, id do Vue i obsługi kliknięcia dla wszystkich linków, która ustawia app.id do this.dataset.id po kliknięciu łącza. W ten sposób za każdym kliknięciem łącza właściwość danych w Vue zostanie ustawiona na id klikniętego łącza.

Następnie wystarczy powiązać właściwość id z elementem składowym.

<edit-job :id="id"></edit-job> 

i komponent EditJob będzie zawsze zaktualizowany id.

Oto working example.

Edit

W kodzie dodanego do swojej przykład definiowania wszystkich skryptu jQuery w Created-jobs.blade.php. W takim przypadku funkcja, którą napisałeś, nie ma dostępu do zmiennej app zdefiniowanej w pakiecie pakietu internetowego ze względu na normalne reguły ustalania zakresu javascript. Aby udostępnić app dla twojego kodu jQuery, dodaj go do window.

window.app = new Vue({ 
    el: '#app', 
    data:{ 
     id: null 
    } 
}); 

drugie, jakbyś określił getID funkcji, nic nazywa go. Należy go wywołać po kliknięciu linków. Dodaj to gdzieś do kodu jQuery w Created-jobs.blade.php (najlepiej w funkcji dokumentu ready).

$("[data-id]").on("click", getID)