将变量从调用它的父页面传递给 Vue 组件
[英] Passing a variable to a Vue component from the parent page that called it
本文介绍了将变量从调用它的父页面传递给 Vue 组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的表格来显示我的所有数据:
主文件.php
<头><tr><th>{{ __('Job Name') }}</th><th>{{ __('Job Description') }}</th><th>{{ __('Job Status') }}</th><th>{{ __('Job Applications') }}</th>| {{ __('Manage') }} | </tr><tr><td></td><td></td><td></td><td class="non_searchable"></td><td class="non_searchable"></td></tr></thead>
<div id="应用程序"><div id="editJob" class="modal淡入" role="dialog"><div class="modal-dialog"><!-- 模态内容--><div class="modal-content"><edit-job id=""></edit-job>
现在，我有一个编辑按钮，我正在尝试为该特定行打开一个编辑模式:
<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 文件，以便我可以将其用于获取和发布请求:
myfile.vue
<div><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">编辑作业</h4>
<div class="modal-body"><form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)"><!-- 删除了代码，它只是输入！--></表单>
<div class="modal-footer"><button type="button" class="btn btn-info btn-fill btn-wd" v-on:click="addJob">保存</button><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</模板><脚本>导出默认值{道具:['id']，数据:函数(){返回 {国家:[]，姓名: ''，概括: ''，工资类型:'',工资来自:'',薪水:'',地点: ''，联系电子邮件: ''，联系电话: ''，错误:新错误()}},方法:{添加作业:函数(){axios.post('/jobs/edit', this.$data).then(响应 => {if(response.data.status === true){$('#editJob').modal('hide');getJobTable();}别的{formError = response.data.message;}}).catch(error => this.errors.record(error.data))}},安装:函数(){console.log($(this).data('id'));axios.get('/jobs/my-job/').then(响应 => {this.name = response.data.namethis.summary = response.data.summarythis.salarytype = response.data.salary_typethis.salaryfrom = response.data.salary_fromthis.salaryto = response.data.salary_tothis.location = response.data.locationthis.contactemail = response.data.contactthis.contactphone = response.data.phone})axios.get('/国家').then(响应 => {this.countries = response.data;})}}
如何将我的 href id 传递给我以用于我的请求?谢谢
我的结构:
Created-jobs.blade.php
https://pastebin.com/TPBnC1qP
编辑-Job.vue
https://pastebin.com/30UWR5Nn
app.js
https://pastebin.com/1yxZWvVC
表格只是填充数据，并像这样添加下拉列表:
- <a href='#' class='dropdown-toggle' data-toggle='dropdown' aria-expanded='false'><i class='icon-menu9'></i></a>
<li><a href='javascript:void();'data-id='{$job->id}' onclick='deleteJob({$job->id})'><i class='icon-cross'></i>删除作业</a>
解决方案
您没有提供有关应用程序结构的大量信息，但看起来您至少使用了一个文件组件来显示数据在您的模态中，它完全通过 Bootstrap 显示.看起来你想要传递给 Vue 的带有 id 值的表在 Vue 本身之外.
既然如此，您可以将想要的数据传递给单个文件组件的方法是将 Vue 捕获到一个变量中，然后在单击表中的链接时设置 id.
假设您的 main.js 或 app.js 如下所示:
从'vue'导入Vue从 './EditJob.vue' 导入 EditJobVue.component('edit-job', EditJob)const app = new Vue({el: '#app',数据:{id:空}})//为具有 `data-id` 属性的链接添加点击处理程序.//这是使用 jQuery(因为您使用的是 Bootstrap)但是您//可以以任何您想要的方式执行此操作.$("[data-id]").on("点击", function(){//将 Vue 的数据设置为链接中的 data-id 属性.app.id = this.dataset.id})
注意代码如何在变量 app 中捕获 new Vue(...) 的结果.然后我添加了数据属性，id 到 Vue 和一个点击处理程序，用于将 app.id 设置为 this.dataset.id 的所有链接 每当点击链接时.这样，每次点击链接时，Vue 中的 data 属性都会设置为点击链接的id.
然后，您需要做的就是将 id 属性绑定到您的组件.
和您的 EditJob 组件将始终获得更新的 id.
这是一个工作示例.
编辑
在您添加到示例的代码中，您在 Created-jobs.blade.php 中定义了所有 jQuery 脚本.在这种情况下，您编写的函数 getID 无权访问您在 webpack 包中定义的 app 变量，因为正常的 javascript 范围规则.要使 app 可访问您的 jQuery 代码，请将其添加到 window.
window.app = new Vue({el: '#app',数据:{id:空}});
其次，虽然您定义了 getID 函数，但 没有 调用它.单击链接时需要调用它.将此添加到 Created-jobs.blade.php 中的 jQuery 代码中(最好在文档 ready 函数中).
$("[data-id]").on("click", getID)
I have a simple table that displays all of my data:
main 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>
Now, I have a edit button that I am trying to open an edit modal for that specific row:
<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>";
The href is is location in one of the of my data table, I am trying to pass that to my .vue file so I can use it for my get and post requests:
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>
How can I past my href id to my to use for my request? Thanks
MY structure:
Created-jobs.blade.php
https://pastebin.com/TPBnC1qP
Edit-Job.vue
https://pastebin.com/30UWR5Nn
app.js
https://pastebin.com/1yxZWvVC
The table just populates the data, and adds the dropdown like so:
<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>
解决方案
You don't give a lot of information about the structure of your application, but it looks like you are using at least one single file component to display the data inside your modal which is being entirely displayed via Bootstrap. It also looks like the table with the id values you want to pass to Vue is outside of the Vue itself.
That being the case, the way you can pass the data you want to the single file component is to capture the Vue in a variable and then set the id whenever the link in your table is clicked.
Let's suppose your main.js or app.js looks like this:
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
})
Notice how the code captures the result of new Vue(...) in the variable app. Then I've added the data property, id to the Vue and a click handler for all of your links that sets app.id to this.dataset.id whenever a link is clicked. In this way, every time a link is clicked, the data property in the Vue will be set to the id of the clicked link.
Then, all you need to do is bind the id property to your component.
<edit-job :id="id"></edit-job>
and your EditJob component will always get the updated id.
Here is a working example.
Edit
In the code you added to your example, you are defining all of your jQuery script in Created-jobs.blade.php. That being the case, the function you wrote, getID doesn't have access to the app variable you defined in your webpack bundle because of normal javascript scoping rules. To make app accessible to your jQuery code, add it to the window.
window.app = new Vue({
el: '#app',
data:{
id: null
}
});
Secondly, though you defined the getID function, nothing calls it. It needs to be called when the links are clicked. Add this somewhere to your jQuery code in Created-jobs.blade.php (ideally in a document ready function).
$("[data-id]").on("click", getID)
这篇关于将变量从调用它的父页面传递给 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
