Vue.js $refs 未定义

Question

我试图弄清楚为什么我的 Vue 实例的 refs 未定义。

使用 Laravel 项目中的 View.js

这里你可以看到我煽动了 Vue 实例

（资源\资产\js\app.js）：

import AutoPopulateSelect from './components/results-text/AutoPopulateSelect.vue';

const app = new Vue({
    el: '#app',
    components: { 'auto-populate-select': AutoPopulateSelect }
});

这是我实际使用带有 ref 的组件的地方

（资源\视图\结果-文本\edit.blade.php）：

<auto-populate-select ref="models">Vehicle Models</auto-populate-select>

我尝试过运行app.$refs，但这只会返回undefined。我已在控制台中完成此操作，因此应用程序将完成加载。

编辑：

刚刚注意到一些字符串，如果我在下面定义app 的地方运行console.log(app.$refs);，那么：

import AutoPopulateSelect from './components/results-text/AutoPopulateSelect.vue';

const app = new Vue({
    el: '#app',
    components: { 'auto-populate-select': AutoPopulateSelect }
});
console.log(app.$refs);

那么 ref 就在那里！似乎是当我尝试从控制台执行此操作时... Laravel 是否做了一些时髦的事情！？

Answer 1

https://vuejs.org/v2/api/index.html#ref

关于 ref 注册时间的重要说明：因为 refs 它们是由渲染函数创建的，你不能 在初始渲染时访问它们——它们还不存在！ $refs 是 也是非反应性的，因此您不应尝试在 数据绑定模板。

你在哪里使用$refs？你能展示你的完整代码吗？

对于您更新的代码，我同意 Andrius Rimkus。您应该仔细检查您使用的app，或者在页面加载后在控制台中运行console.log(app)，看看它是什么app对象。

而且，由于您使用的是 Vue，因此 Vue 中的大多数代码都可以使用 this 而不是 app。

Answer 2

我知道这太晚了，但是对于遇到同样问题的人来说，

const app 必须在全局范围内声明，这为我解决了这个问题。

应该是这样的：

const window.app = new Vue({
  el: '#app',
  components: {
    'auto-populate-select': AutoPopulateSelect
  }
});

现在console.log(app.$refs); 应该显示来自其他 js 文件或内联函数的所有引用。