How to get the view or component object using its name in Vue js?

javascript, mvvm, viewmodel, vue.js

Solution

From the VueJS guide

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using `ref`. For example:

var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile
<div id="parent">
     <user-profile ref="profile"></user-profile>
</div>

Problem

Javascript code: ``` var main = new Vue({ el: "#main", data: { currentView: "top", }, }); var topComponent = Vue.component('top', Vue.extend({ template: "#top", })); ``` Now when I access main.currentView, I get "top". But with this string 'top', how do i get the component `topComponent`?

Original source

Related problems