Calling a javascript function inside a vue component file

Question

I have a simple component 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"&g×ばつ</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="[phone]">
 <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 component 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 component file?

Answer 1

You 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

Answer 2

You can declare getJobTable() function as global so your script inside vue component can see it,

on your external JS code:

Window.getJobTable = function() {// ...}

on your Vuejs component:

 methods: { 
 addjob: function() {
 // ...
 Window.getJobTable();
 }
}