I'm working on a simple component file for submitting a form, along with a JavaScript function to handle 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>
<!-- Rest of the form fields -->
</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>
<!-- JavaScript logic here -->
</script>
In another file that renders the Vue component file, I have a JavaScript function called getJobTable() for DataTable functionality:
<script>
$(function() {
var getJobTable = function(){
// DataTable logic
}
getJobTable();
});
</script>
To access the getJobTable(); function inside my Vue component file, you can create a global variable in your main HTML file and then call it from within your Vue component using window object:
<script>
mounted: function()
{
window.getJobTable();
}
</script>