Laravel Elixir Vue Component access $refs

Hello!

I'm using Laravel Elixir and Vue Components and I'm trying to access the $refs within a component. In my instance, I am using VueJS Paginator, and I am trying to update the content of the pagination and what is being displayed.

To create a pagination, they say you must do the following:

<v-paginator :resource_url="resource_url" ref="vpaginator" @update="updateResource"></v-paginator>

Then, in order to provide an update, you must go ahead and use the $refs to update the resource, so they advertise doing the following:

vm.$refs.vpaginator.fetchData(resource_url)

However, in this case I'm not sure what the vm would be as I'm using Vue Components. Any suggestions/recommendations?

Oh, and I'm trying to use that fetchData function in my mounted() function to update the content every 10 seconds.

    mounted() {
            setInterval(function () {
                vm.$refs.vpaginator.fetchData();
           }.bind(this), 10000);
        },

If I try the above code it says that the vm does not exist.

Thanks!

Craytor

9 years ago

Best Answer

Level 2

Update: I've actually figured this out, and I'm not sure why I didn't think of this sooner. The following is how you would solve this problem if anyone else is wondering, or curious.

mounted() {
    setInterval(function () {
            this.$refs.vpaginator.fetchData();
        }.bind(this), 10000);
},

1 like

Please or to participate in this conversation.