Question

我有一个简单的组件文件来提交表单，我有一个javascript函数来执行操作：

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

我的js文件在渲染组件vue文件的文件中：

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

如何访问getJobTable（）;在我的组件文件中？

Answer 1

你可以从jquery包装器中取出getJobTable的定义，只留下调用，这样你就可以从任何地方访问getJobTable。

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

// ...

$(function() {
  getJobTable();
})

//...

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

就像这个pen

一样

在vue组件文件中调用javascript函数

1 个答案: