我想更改数据属性并在Laravel中的Vue实例上运行方法。但是由于使用了webpack和laravel,我似乎无法按预期访问实例:
因此window.app
似乎不是我的Vue类的正确实例。
下面是我正在加载的Blade View,您可以看到我在主layout.blade.php
后面附加了一个脚本标签,只是试图更改Vue实例数据属性并运行一个方法。
@push('scripts')
<script>
app.unsaved = true;
app.triggerEvent(null, 'models', null);
</script>
@endpush
下面是我的app.js
(资源/资产/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不是函数
答案 0 :(得分:1)
在您的app.js
文件中,将const app = new Vue({
更改为window.app = new Vue({
。
然后在您的<script>
标签中,将其更改为此。
<script>
window.app.unsaved = true;
window.app.triggerEvent(null, 'models', null);
</script>