Vue.js $refs are undefined

Question

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!?

Works for me: codepen.io/AndriusRimkus/pen/JawENW. As Shawn has said, more code is needed, cause there's no issue with the code you provided. — Andrius Rimkus
– Andrius Rimkus, Commented Sep 19, 2018 at 12:20
you could do a quick test to make sure you are dealing with the same app. console.log(window.app === app); Or be explicit with the app exposure and do something like: window.appWhyNotWork = new Vue. — Andrius Rimkus
– Andrius Rimkus, Commented Sep 19, 2018 at 12:41

tony19 · Accepted Answer · 2022-07-15 05:36:19Z

2

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.

edited Jul 15, 2022 at 5:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 19, 2018 at 12:16

shawn

4,3731 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martyn Ball Over a year ago

See original post: 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.

shawn Over a year ago

Can you show your code or make a minimal app for test?

Martyn Ball Over a year ago

Kinda hard to do this, as i'm using Vue.js from within a Laravel installation, is this helps? I will add the file names as to where my code is from above.

Dave S · Accepted Answer · 2020-03-23 16:37:53Z

0

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.

edited Mar 23, 2020 at 16:37

Dave S

8081 gold badge12 silver badges30 bronze badges

answered Jan 5, 2020 at 5:08

Va Sh

1

1 Comment

Digital Ninja Over a year ago

I don't know where you tested that code, but declaring a const window.app is a syntax error. The window is already an object, so you just want to declare the app property on it, you can't make that into a constant.

Collectives™ on Stack Overflow

Vue.js $refs are undefined

Using View.js from Laravel Project

Edit:

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Using View.js from Laravel Project

Edit:

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related