I have a simple ponent file to submit a form, and I have a javascript function to perform an action:
<template>
<div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Job</h4>
</div>
<div class="modal-body">
<form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)">
<div class="form-group">
<label>Job Name</label>
<input type="text" class="form-control" placeholder="Web Developer" v-model="name">
<span v-text="errors.get('name')" class="text-danger help-block"></span>
</div>
<div class="form-group">
<label>Job Summary</label>
<textarea class="form-control" v-model="summary"></textarea>
<span v-text="errors.get('summary')" class="text-danger help-block"></span>
</div>
<div class="form-group">
<div class="col-sm-6" style="padding-left: 0px;">
<label>Salary Type</label>
<select class="form-control" v-model="salarytype">
<option value="">Select an option</option>
<option value="hourly">Hourly</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
</select>
<span v-text="errors.get('salarytype')" class="text-danger help-block"></span>
</div>
<label>Salary</label>
<div class="col-sm-6 input-group">
<input type="number" v-model="salaryfrom" class="form-control" placeholder="24,000"">
<span class="input-group-addon">-</span>
<input type="number" v-model="salaryto" class="form-control" placeholder="34,000">
<span v-text="errors.get('salaryfrom')" class="text-danger help-block"></span>
<span v-text="errors.get('salaryto')" class="text-danger help-block"></span>
</div>
</div>
<div class="form-group col-sm-6" style="padding:0px;">
<label>Job Location</label><br/>
<select class="form-control" v-model="location" @change="onChange($event.target.value)">
<option>Select an option</option>
<option v-for="(value, key) in countries" :value="key">{{ value }}</option>
</select>
<span v-text="errors.get('location')" class="text-danger help-block"></span>
</div>
<div class="form-group col-sm-6">
<label>Contact Details</label>
<input type="email" v-model="contactemail" class="form-control" placeholder="John Doe">
<span v-text="errors.get('contactemail')" class="text-danger help-block"></span>
</div>
<label>Contact Number</label>
<div class="form-group input-group">
<span class="input-group-addon">
<i class="fa fa-phone"></i>
</span>
<input type="tel" v-model="contactphone" class="form-control" placeholder="+4407584457483">
<span v-text="errors.get('contactphone')" class="text-danger help-block"></span>
</div>
</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>
class Errors
{
constructor()
{
this.errors = {};
}
get(field){
if(this.errors[field]){
return this.errors[field][0]
}
}
any(){
console.log(Object.keys(this.errors).length);
return Object.keys(this.errors).length > 1;
}
record(errors){
this.errors = errors;
}
clear(field){
delete this.errors[field];
}
}
export default
{
data: function ()
{
return {
countries: [],
name: '',
summary: '',
salarytype: '',
salaryfrom: '',
salaryto: '',
location: '',
contactemail: '',
contactphone: '',
errors: new Errors()
}
},
methods:
{
addJob: function()
{
axios.post('/jobs/create', this.$data)
.then(response => {
if(response.data.status === true){
$('#createJob').modal('hide');
getJobTable();
}
else{
formError = response.data.message;
}
})
.catch(error => this.errors.record(error.data))
}
},
mounted: function()
{
axios.get('/countries')
.then(response => {
this.countries = response.data;
})
}
}
</script>
My js file in a file that is rendering the ponent vue file:
<script>
$(function() {
var getJobTable = function(){
console.log('dt triggered');
$('#all-jobs').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('job.datatable.usersjobs') !!}',
columns: [
{ data: 'name', name: 'name' },
{ data: 'summary', name: 'summary' },
{ data: 'status', name: 'status' },
{ data: 'applications', name: 'applications' },
{ data: 'action', name: 'action' },
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
}
getJobTable();
});
</script>
How can I access getJobTable(); inside my ponent file?
I have a simple ponent file to submit a form, and I have a javascript function to perform an action:
<template>
<div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Job</h4>
</div>
<div class="modal-body">
<form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)">
<div class="form-group">
<label>Job Name</label>
<input type="text" class="form-control" placeholder="Web Developer" v-model="name">
<span v-text="errors.get('name')" class="text-danger help-block"></span>
</div>
<div class="form-group">
<label>Job Summary</label>
<textarea class="form-control" v-model="summary"></textarea>
<span v-text="errors.get('summary')" class="text-danger help-block"></span>
</div>
<div class="form-group">
<div class="col-sm-6" style="padding-left: 0px;">
<label>Salary Type</label>
<select class="form-control" v-model="salarytype">
<option value="">Select an option</option>
<option value="hourly">Hourly</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
</select>
<span v-text="errors.get('salarytype')" class="text-danger help-block"></span>
</div>
<label>Salary</label>
<div class="col-sm-6 input-group">
<input type="number" v-model="salaryfrom" class="form-control" placeholder="24,000"">
<span class="input-group-addon">-</span>
<input type="number" v-model="salaryto" class="form-control" placeholder="34,000">
<span v-text="errors.get('salaryfrom')" class="text-danger help-block"></span>
<span v-text="errors.get('salaryto')" class="text-danger help-block"></span>
</div>
</div>
<div class="form-group col-sm-6" style="padding:0px;">
<label>Job Location</label><br/>
<select class="form-control" v-model="location" @change="onChange($event.target.value)">
<option>Select an option</option>
<option v-for="(value, key) in countries" :value="key">{{ value }}</option>
</select>
<span v-text="errors.get('location')" class="text-danger help-block"></span>
</div>
<div class="form-group col-sm-6">
<label>Contact Details</label>
<input type="email" v-model="contactemail" class="form-control" placeholder="John Doe">
<span v-text="errors.get('contactemail')" class="text-danger help-block"></span>
</div>
<label>Contact Number</label>
<div class="form-group input-group">
<span class="input-group-addon">
<i class="fa fa-phone"></i>
</span>
<input type="tel" v-model="contactphone" class="form-control" placeholder="+4407584457483">
<span v-text="errors.get('contactphone')" class="text-danger help-block"></span>
</div>
</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>
class Errors
{
constructor()
{
this.errors = {};
}
get(field){
if(this.errors[field]){
return this.errors[field][0]
}
}
any(){
console.log(Object.keys(this.errors).length);
return Object.keys(this.errors).length > 1;
}
record(errors){
this.errors = errors;
}
clear(field){
delete this.errors[field];
}
}
export default
{
data: function ()
{
return {
countries: [],
name: '',
summary: '',
salarytype: '',
salaryfrom: '',
salaryto: '',
location: '',
contactemail: '',
contactphone: '',
errors: new Errors()
}
},
methods:
{
addJob: function()
{
axios.post('/jobs/create', this.$data)
.then(response => {
if(response.data.status === true){
$('#createJob').modal('hide');
getJobTable();
}
else{
formError = response.data.message;
}
})
.catch(error => this.errors.record(error.data))
}
},
mounted: function()
{
axios.get('/countries')
.then(response => {
this.countries = response.data;
})
}
}
</script>
My js file in a file that is rendering the ponent vue file:
<script>
$(function() {
var getJobTable = function(){
console.log('dt triggered');
$('#all-jobs').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('job.datatable.usersjobs') !!}',
columns: [
{ data: 'name', name: 'name' },
{ data: 'summary', name: 'summary' },
{ data: 'status', name: 'status' },
{ data: 'applications', name: 'applications' },
{ data: 'action', name: 'action' },
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
}
getJobTable();
});
</script>
How can I access getJobTable(); inside my ponent file?
Share Improve this question edited Jun 25, 2017 at 15:01 Michail Michailidis 12.2k6 gold badges69 silver badges109 bronze badges asked Jun 25, 2017 at 11:27 user4655002user46550022 Answers
Reset to default 7You could take the definition of getJobTable out of the jquery wrapper and leave only the call inside, that way you could access getJobTable from anywhere.
var getJobTable = function() {
// ...
}
// ...
$(function() {
getJobTable();
})
//...
methods: {
addjob: function() {
// ...
getJobTable();
}
}
Like in this pen
You can declare getJobTable() function as global so your script inside vue ponent can see it,
on your external JS code:
Window.getJobTable = function() {// ...}
on your Vuejs ponent:
methods: {
addjob: function() {
// ...
Window.getJobTable();
}
}