0

我已经在这个问题上停留了几个星期，现在想是时候寻求帮助了。

基本上我将 Laravel 与 Vue 2 和 matfish2/vue-tables-2 包一起使用，一切都很好，该表在那里没有显示任何问题。问题是当我执行诸如删除一行之类的操作时，并且在我从数据库中删除 axios 之后，我想触发 refresh() 以重绘表格。文档建议运行这个：

 this.$refs.myTable.refresh()

如果我添加一个按钮 @click 来触发我的函数来调用它，它可以正常工作，但是如果我在我的 axios 响应之后尝试调用它，则该方法似乎根本无法访问该 $refs 表的 $refs。

我正在阅读这篇文章以试图阐明：

https://forum.vuejs.org/t/accessing-refs/15049/12

如果我试图在生命周期中访问它直到它被破坏，但当页面已经呈现时对我没有帮助，这将有效。

这是我的文件设置：

应用程序.js

// main vue
import Vue from 'vue'

// axios
import axios from 'axios'
window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

// datatables
import {ServerTable, ClientTable, Event} from 'vue-tables-2'
Vue.use(ServerTable, {}, false);
Vue.use(ClientTable, {}, false);

// vue2-simpalert-plugin
import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert)

//compoonents
import Modal from './components/modals/show-modal.vue'
import DimChart from './components/dimfactor/dimchart.vue'
import OOSManager from './components/oosmanager/oosmanager.vue'
import DailyShipments from './components/dailyshipments/dailyshipments.vue'

if (document.getElementById("app")) {
    var app = new Vue({
        el: '#app',

        components: {
            'modal': Modal,
            'dimchart': DimChart,
            'oosmanager': OOSManager,
            'dailyshipments': DailyShipments
        },

        methods: {

        }

    });

    window.vue = app;
}

oosmanager.vue

<template>
    <div id="oosmanager" class="container-fluid">
        <button type="button" class="btn btn-primary">Add New OOS</button>
        <button type="button" class="btn btn-primary" @click="refresh">Refresh</button>
        <div class="row">
            <div class="col-sm-12">
                <v-server-table url="oosmanager/getData" :columns="columns" :options="options" ref="myOOSTable">
                    <template slot="qty" scope="props">
                        {{ props.row.get_item.qty }}
                    </template>

                    <template slot="customers" scope="props">
                        <div class="container-fluid">
                            <p><button type="button" class="btn btn-primary">Add</button></p>
                            {{ props.row }}
                            <div v-if="typeof props.row.get_customer_items.length !== 'undefined'">
                                <div v-if="props.row.get_customer_items.length > 0">
                                    <table class="table table-bordered customers__table">
                                        <thead>
                                            <tr>
                                                <th class="customers__name">Name</th>
                                                <th class="customers__notes">Notes</th>
                                                <th class="customers__editrep">Rep</th>
                                                <th class="customers__buttons"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="items in props.row.get_customer_items">
                                                <td>{{ items.get_customer.customerName }}</td>
                                                <td>{{ items.notes }}</td>
                                                <td>{{ items.lastEditRep }}</td>
                                                <td><button type="button" class="btn btn-danger" @click="open('deleteCustomerRow', items)">&nbsp;x&nbsp;</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </template>

                    <template slot="delete" scope="props">
                        <button type="button" class="btn btn-danger" @click="open('deleteRow', props.row)">&nbsp;x&nbsp;</button>
                    </template>
                </v-server-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [],
        data() {
            return {
                columns: [
                    'created_at',
                    'sku',
                    'qty',
                    'customers',
                    'delete',
                ],
                options: {
                    headings: {
                        created_at: 'Date / Time',
                        delete: '',
                    },
                    columnsClasses: {
                        'created_at': 'created-at',
                        'sku': 'sku',
                        'qty': 'qty',
                        'customers': 'customers',
                        'delete': 'delete'
                    },
                    sortable: [
                        'created_at',
                        'sku',
                        'qty'
                    ]
                }
            }
        },

        methods: {
            open (area, row) {
                if (area == 'deleteRow') {
                    let confirmFn = function() {
                        axios.get('oosmanager/test/'+row.id).then(function(response) {
                            this.refresh;
                        });
                    }

                    let obj = {
                        title: 'Delete ' + row.sku + '?' ,
                        message: 'Are you sure?',
                        type: 'info',
                        showXclose: true,
                        useConfirmBtn: true,
                        onConfirm: confirmFn
                    }               
                    this.$Simplert.open(obj);
                }

                if (area == 'deleteCustomerRow') {
                    let confirmFn = function() {
                        console.log(customersItemsId = row.id);
                        console.log(this.refresh);
                    }

                    let obj = {
                        title: 'Delete ' + row.get_customer.customerName + '?' ,
                        message: 'Are you sure?',
                        type: 'info',
                        showXclose: true,
                        useConfirmBtn: true,
                        onConfirm: confirmFn
                    }               
                    this.$Simplert.open(obj);
                }
            },

            refresh() {
                this.$refs.myOOSTable.refresh();
            }
        },

        mounted() {

        }
    }
</script>

<style lang="css">
    #oosmanager {
        width: 100%;
    }

    #oosmanager th {
        text-transform: uppercase;
    }

    #oosmanager th.created-at {
        width: 8%;
    }

    #oosmanager th.sku {
        width: 23%;
    }

    #oosmanager th.customers {
        width: 63%;
    }

    #oosmanager th.qty {
        width: 4%;
    }

    #oosmanager th.delete {
        width: 2%;
    }

    #oosmanager td.delete {
        vertical-align: middle;
    }

    #oosmanager th.delete span {
        text-align: center;
    }


    #oosmanager .customers__table {
        width: 100%;
        table-layout: fixed;
    }

    #oosmanager .customers__table .customers__name {
        width: 22%;
    }

    #oosmanager .customers__table .customers__notes {
        width: 59%;
    }

    #oosmanager .customers__table .customers__editrep {
        width: 15%;
    }

    #oosmanager .customers__table .customers__buttons {
        width: 4%;
    }

    .VueTables__child-row-toggler {
    width:16px;
    height:16px;
    line-height: 16px;
    display: block;
    margin: auto;
    text-align: center;
    }

    .VueTables__child-row-toggler--closed::before {
    content: "+";
    }

    .VueTables__child-row-toggler--open::before  {
    content: "-";
    }   
</style>

index.blade.php

@extends('defaults.skeleton')
@section('title')
    <div class="container-fluid">
        <div id="page-title" class="row">
            <p><h2>OOS Manager</h2></p>
        </div>
    </div>
@stop
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div id="app">
        <simplert></simplert>
        <oosmanager></oosmanager>
    </div>
@stop

回顾

所以基本上一个触发该方法的按钮将看到 $refs 并正确刷新/重绘，但是如果在 axios 调用之后尝试访问我的方法中的 $refs ，它根本不会在 dom 中看到它并显示未定义。尝试安装挂载但没有帮助，因为这似乎与渲染的最后一部分有关。如何正确访问它？

更新

我无法在我的 axios 响应中完全访问它，但它现在以这种方式显示在我的 created() 或 mount() 中，因此从重复的帖子中获得了有用的见解。但是，我确实通过将其声明为全局变量来实现它，例如：

created() {
    var self = this;
    window.myData = this.$refs;
}

然后是我的 axios 回复：

axios.get('oosmanager/test/'+row.id).then(function(response) {
    window.myData.myOOSTable.refresh();
});

不确定方法是否正确，但目前正在工作。

4

0 回答 0