vue.js - 将变量从调用它的父页面传递给 Vue 组件

Question

我有一个简单的表格来显示我的所有数据:

主文件.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> 

现在，我有一个编辑按钮，我正在尝试为该特定行打开一个编辑模式:

<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 是我的一个数据表中的位置，我试图将其传递到我的 .vue 文件，以便我可以将它用于我的 get 和 post 请求:

我的文件.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>

如何将我的 href id 传递给我以用于我的请求？谢谢

我的结构:

创建的-jobs.blade.php

https://pastebin.com/TPBnC1qP

Edit-Job.vue

https://pastebin.com/30UWR5Nn

应用程序.js

https://pastebin.com/1yxZWvVC

表格只是填充数据，并像这样添加下拉列表:

<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

您没有提供有关应用程序结构的大量信息，但看起来您至少使用了一个文件组件来显示模式内的数据，这些数据完全通过 Bootstrap 显示。看起来您要传递给 Vue 的包含 id 值的表在 Vue 本身之外。

在这种情况下，您可以将所需数据传递给单个文件组件的方法是在变量中捕获 Vue，然后在单击表格中的链接时设置 id .

假设您的 main.js 或 app.js 如下所示:

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

注意代码如何在变量 app 中捕获 new Vue(...) 的结果。然后我将数据属性 id 添加到 Vue，并为所有链接添加了点击处理程序，将 app.id 设置为 this.dataset.id 每当单击链接时。这样，每次点击一个链接，Vue中的data属性都会被设置为被点击链接的id。

然后，您需要做的就是将 id 属性绑定(bind)到您的组件。

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

并且您的 EditJob 组件将始终获得更新后的 id。

这是一个working example .

编辑

在添加到示例的代码中，您在 Created-jobs.blade.php 中定义了所有 jQuery 脚本。在这种情况下，由于正常的 javascript 作用域规则，您编写的函数 getID 无法访问您在 webpack 包中定义的 app 变量。要使您的 jQuery 代码可以访问 app，请将其添加到 window。

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

其次，虽然您定义了 getID 函数，但没有调用它。单击链接时需要调用它。将此添加到 Created-jobs.blade.php 中的 jQuery 代码中(最好在文档 ready 函数中)。

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