Đi qua một biến để một thành phần Vue từ trang mẹ mà gọi nó là

Question

Tôi có một bảng đơn giản mà sẽ hiển thị tất cả các dữ liệu của tôi:

chính 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> 

Bây giờ, tôi có nút chỉnh sửa mà tôi đang cố mở một phương thức chỉnh sửa cho hàng cụ thể đó:

<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 là vị trí trong một trong bảng dữ liệu của tôi, tôi đang cố gắng ss đó để tập .vue của tôi để tôi có thể sử dụng nó cho GET và POST yêu cầu của tôi:

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> 

Làm thế nào tôi có thể qua id href của tôi để tôi sử dụng cho yêu cầu của tôi? Cảm ơn

cấu trúc MY:

Created-jobs.blade.php

https://pastebin.com/TPBnC1qP

Sửa-Job.vue

https://pastebin.com/30UWR5Nn

app.js

https://pastebin.com/1yxZWvVC

Bảng chỉ populates dữ liệu, và cho biết thêm menu thả xuống như vậy:

<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

Bạn không đưa ra rất nhiều thông tin về cấu trúc của ứng dụng của bạn, nhưng có vẻ như bạn đang sử dụng tại ít nhất một thành phần tệp duy nhất để hiển thị dữ liệu bên trong phương thức của bạn đang được hiển thị hoàn toàn thông qua Bootstrap. Nó cũng giống như bảng với các giá trị id bạn muốn chuyển đến Vue bên ngoài chính Vue.

Trường hợp đó, cách bạn có thể chuyển dữ liệu bạn muốn cho thành phần tệp duy nhất là nắm bắt Vue trong một biến và sau đó đặt id bất cứ khi nào liên kết trong bảng của bạn được nhấp.

Giả sử main.js hoặc app.js của bạn trông như thế này:

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

Chú ý cách mã nắm bắt được kết quả của new Vue(...) trong biến app. Sau đó, tôi đã thêm thuộc tính dữ liệu, id vào Vue và trình xử lý nhấp chuột cho tất cả các liên kết của bạn đặt app.id thành this.dataset.id bất cứ khi nào một liên kết được nhấp vào. Bằng cách này, mỗi khi một liên kết được nhấp vào, thuộc tính dữ liệu trong Vue sẽ được đặt thành id của liên kết được nhấp.

Sau đó, tất cả những gì bạn cần làm là liên kết thuộc tính id với thành phần của bạn.

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

và thành phần EditJob của bạn sẽ luôn được cập nhật id.

Đây là số working example.

Sửa

Trong đoạn code bạn đã thêm vào ví dụ của bạn, bạn đang xác định tất cả các kịch bản jQuery của bạn trong Created-jobs.blade.php. Đó là trường hợp, chức năng bạn đã viết, getID không có quyền truy cập vào biến số app mà bạn đã xác định trong gói webpack của mình vì các quy tắc phạm vi javascript bình thường. Để làm cho app có thể truy cập được vào mã jQuery của bạn, hãy thêm nó vào window.

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

Thứ hai, mặc dù bạn đã xác định getID chức năng, gì gọi nó. Nó cần phải được gọi khi các liên kết được nhấp vào. Thêm mã này vào đâu đó vào mã jQuery của bạn trong Created-jobs.blade.php (lý tưởng là trong một tài liệu ready chức năng).

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