CODEWITHSUNDEEP
vue.jsvue-componentvue-router
3rdSenna
3rdSenna

Reputation: 376

vue-router doesn't recognize $ref from a component after routing

I'm new with Vuejs and vue-router I've been reading a lot View documentation and forums to figure this out.

I can make my routing working well. But I can't (easily) the "ref" from the content that was routed.

I say "easily" because I found on "this.$children[0].$children[0].$refs" which doesn't look correct to me and also difficult to maintain. What I would like is to have easy way like "this.$refs" or "this.router["foo"].$refs".

I'll paste the vue documentation basic example with "ref" in the elements.

HTML

<div id="app">
  <h1 ref="myrefInitial">Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
  <p>
    refs founds: {{getAllRefs}}
  </p>
</div>

<script src="index.js"></script>

JS

const Foo = {
 template: '<div ref="myrefFoo">foo</div>'
}
const Bar = {
  template: '<div ref="myrefBar">bar</div>'
}

const routes = [{
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

router.afterEach((to, from) => {
  console.log("going to " + to.fullPath)
  console.log(to);

  router.app.getAllRefs();
})

const app = new Vue({

router,
  computed: {
    getAllRefs: function(){
        return this.$refs
    }
  }
}).$mount('#app')

JsFiddle example https://jsfiddle.net/3rdSenna/kaqqsrob/

Upvotes: 2

Views: 3275

Answers (1)

3rdSenna
3rdSenna

Reputation: 376

In the end I wrote a simple For loop to dig on every $refs and find the child $refs name until is matched. It solved my problem.

But I believe the suggestion from @rinatdobr would suite me well.

Upvotes: 1

Related Questions