How use View fit method? about vuelayers HOT 7 CLOSED

You can reference any component in Vue with ref attribute (https://vuejs.org/v2/api/#vm-refs):

<template>
  <div>
    <button @click="fit"></button>
    <vl-map>
      <vl-view ref="view"></vl-view>
    </vl-map>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    fit () {
      // all tagged with ref attributes components now available at this.$refs.*
      // vuelayers components are mounted asynchronously, you should avail $mountPromise
      this.$refs.view.$mountPromise.then(() => {
        return this.$refs.view.fit([0, 0, 10, 10])
      })
     // access ol.View instance
     console.log(this.$refs.view.$view)
    }
  },
}
</script>

from vuelayers.

THANKS!

from vuelayers.

Just commenting from my experience of going this route - I feel like this breaks MVVM pattern a bit and the Vue documentation seem to try to dissuade use of vm.$refs (calls it an escape hatch). It does seem to pull the child VM code into the parent VM. I don't know how else you would do it though other than triggering a method call from an observable in the parent VM, which is not very intuitive. It is a tough problem.

from vuelayers.

I totally agree with you, but I can't anything better yet.

from vuelayers.

I'm new to Vue but I think the clean solution involves events. The parent emits a "FitCommand" event and the child listens to it and calls its own fit method. More details here:
Parent-Child communication in VueJS

from vuelayers.

Thank you for advise! It could be tricky to control animation methods like fit and animate due to asynchronous nature of them, i.e. it would be not so explicitly in my opinion.
But $mountPromise already can be replaced with mounted event listener on the vl-view tag.
What I should to add is providing instance as mounted/created event argument to avoid using of ref attribute. I did not think about it at once. Thank you! 👍

from vuelayers.

Thanks for the discussion. Not saying this is the way to go either, but thought I would add that I've done asynchronous events with parent/child components before (not in VUE) and what I did was publish and subscribe on both sides -

For example the parent publishes a FIT message, and the child publishes a FIT_COMPLETE message when the async callback is called. I passed a "parent guid" to the child constructor so it knows it's parent, and the child adds this guid in the FIT_COMPLETE message so the parent knows to react to only it's child.
There is probably a better way but that's what I did.

from vuelayers.