CODEWITHSUNDEEP
javascriptvue.js
Martyn Ball
Martyn Ball

Reputation: 4885

Vue.js $refs are undefined

I'm trying to figure out why my Vue instance's refs are undefined.

Using View.js from Laravel Project

Here you can see I instigate the Vue instance

(resources\assets\js\app.js):

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

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

And this is where I actually use the component with the ref on it

(resources\views\results-text\edit.blade.php):

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

I have tried running app.$refs however this just returns undefined. I have done this from within the console so the application would of finished loading.

Edit:

Just noticed something string, if I run console.log(app.$refs); below where app is defined, so:

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

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

Then the ref is there! It appears to be when I attempt to do this from the console... does Laravel do something funky!?

Upvotes: 1

Views: 6166

Answers (2)

shawn
shawn

Reputation: 4363

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

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

Where do you use $refs? Can you show your full code?

For your updated code, I agree with Andrius Rimkus. You should check the app you were using carefully, or just run console.log(app) in console after the page is loaded to see what the app object it is.

And, since you are using Vue, most code inside Vue you can just use this instead of app.

Upvotes: 2

Va Sh
Va Sh

Reputation: 1

I know this too late, but to anyone who is having this same issue,

const app has to declared globally, which fixed the issue for me.

So it should be:

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

Now console.log(app.$refs); should display all the refs from other js files or inline functions.

Upvotes: 0

Related Questions