Feature: reverse lookup element to vm

[simplesmiler]

It's possible to "Inspect DOM" for given vm, and Chrome will open "Elements" panel and select the root element of vm.

It would be helpful, if there was a way to do the reverse of that. Given the element, open "Vue Devtools" panel and select the vm this element is governed by (if any).

[simplesmiler]

Might be slightly complicated for slots, because for slots the closest element with viewmodel bound to it is not the viewmodel the data comes from.

var Home = {
  template: `
    <div>
      <tab-group>
        <tab-page v-for="tab in tabs">
          <div>{{ <belongs to "home" vm, not to "tab-page" vm> }}</div>
        </tab-page>
      </tab-group>
    </div>
  `,
};

[blake-newman]

@simplesmiler Any luck with this... I don't see that there is many other tools with this capability.

[simplesmiler]

I think the best way to do that would be to inject a vm reference into every element this vm governs. It's already done with root elements (element.__vue__).

Don't have time to try to implement it yet.

---

UPDATE: Should not inject __vue__ into every element, because it would break the logic elsewhere. Better choose a different name. And only inject when Vue.config.devtools === true.

[simplesmiler]

Another complication is that in Vue 2 element may belong to multiple instances. The example below is producing a fragment (elementless) instance in Vue 1, but in Vue 2 it is absolutely valid. The __vue__ seems to point at the parent instance.

Example: https://jsfiddle.net/simplesmiler/5LydL0hz/

I see two options:

• Show user a list of instances this element belongs to.
• Always pick the first (or last) instance from the list.

[michalsnik]

I'm not sure it's worth the hassle actually. I don't see any interest around this functionality since it was proposed, so I'm going to close it now, and we'll rather focus on more vital things :)

[Akryum]

If I understand OP correctly, it is implemented by #476 and #479.