javascript - Vue.js $refs 未定义

Question

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

使用 Laravel 项目中的 View.js

在这里你可以看到我发起了Vue实例

(资源\ Assets \js\app.js):

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

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

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

(资源\ View \结果文本\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://v2.vuejs.org/v2/api/index.html#ref

An important note about the ref registration timing: because the refsthemselves are created as a result of the render function, you cannotaccess them on the initial render - they don’t exist yet! $refs isalso non-reactive, therefore you should not attempt to use it intemplates for data-binding.

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

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

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