Laravel 和 VueJS，访问 Vue 实例。

Posted 2023-02-23

【中文标题】Laravel 和 VueJS，访问 Vue 实例。

【英文标题】：Laravel and VueJS, access Vue instance.

【发布时间】：2019-02-27 23:26:36

【问题描述】：

我想在 Laravel 中更改数据属性并在我的 Vue 实例上运行一个方法。但是由于使用 webpack 和 laravel，我似乎无法访问我期望的实例：

所以window.app 似乎不是我的 Vue 类的正确实例。

下面是我正在加载的 Blade 视图，如您所见，我将一个脚本标记附加到我的主 layout.blade.php，只是尝试更改 Vue 实例数据属性并运行一个方法。

@push('scripts')
    <script>
        app.unsaved = true;
        app.triggerEvent(null, 'models', null);
    </script>
@endpush

以下是我的app.js (resources/assets/js/app.js) 的一部分：

const app = new Vue(
    el: '#app',
    components: 
        'models-select': ModelsSelect
    ,
    data: 
        showModel: false,
        unsaved: false
    ,
    mounted: function() 

        let _self = this;

        (function() 

            document.querySelectorAll("input, textarea, select").forEach(function(e) 
                e.addEventListener('change', function() 
                    _self.unsaved = true;
                    e.classList.add('is-changed');
                );
            );

            function unloadPage()
                if (_self.unsaved) return 'You appear to have un-saved changes!';
            

            window.onbeforeunload = unloadPage;

        )();

    ,
    methods: 

        triggerEvent: function(event, target, property)
        
            app.$refs[target].update(event, property);
        

如您所见，我希望通过我在 app.js 中定义的全局 app 变量来操作 Vue 实例。然而，情况似乎并非如此。

运行triggerEvent 方法时出现以下错误：

app.triggerEvent 不是函数

【参考方案1】：

在您的app.js 文件中，将const app = new Vue( 更改为window.app = new Vue(。

然后在你的 <script> 标签中，将其更改为这个。

<script>
    window.app.unsaved = true;
    window.app.triggerEvent(null, 'models', null);
</script>

【讨论】：

我认为通过在全局空间中定义 const 它将被分配给窗口。谢谢，这行得通。

没问题。当 Webpack 将其编译下来时，它只会将其从 const 更改为 var - 因此它不会在 window 对象上可用。