framework7

Open full view…

F7 + vue reload component on back-link="back"

sergeantpepper
Tue, 16 May 2017 06:46:18 GMT

Hi together, I have some litte problems with the router/component functionality. Here´s my challange: I have a component called "viewTodo.vue" where i list all my current todos. A button navigates me to a another component called "addTodo.vue", where i can add some new todos. So far, so good. When i click the back-link in my Navbar i will return to the viewTodo.vue component, but the new todos i have added, are not listed. How can i react on the back-link so that my component will be reloaded? Many thanks in advance.

BrandonHunter
Tue, 16 May 2017 07:25:50 GMT

The issue isn't the reloading... Or at least shouldn't be. How are you storing the Todos? Since you're using components, you need to make sure that the Vue context of _both_ components has access to the data you are creating on the second component... the best way to do this, in my limited experience, is to set a data value on the shared Vue instance that is the array of Todos. Then supply that array as a prop to the addTodo component. Then, make sure a watcher is declared in the parent Vue instance to watch for any changes to the array. So in the watch function, have it Rerender the content of viewTodo on a change to the arrayby Either passing the new values to the viewTodo component, or directly modifying the DOM from the watcher. You should be able to render the Todos on the DOM this way. But if you use virtual list to display the Todos, all you have to do is insert the newly created todo into the array list that Virtual List uses to render its components. The other option is emitting either a Vue $emit event or even a vanillaJS event when an item is added or back li nk is clicked and listening for it with either v-on or in the component and then use a method to update the DOM. But seriously, check out Virtal List f7 Vue component for this case.... as long as you're no too worried about animations, I think you'll find it's much simpler than what you're trying to do currently. Apologies if I completely misunderstood your issue.

sergeantpepper
Tue, 16 May 2017 07:41:20 GMT

I solve the state management with Vuex and both component have access to the data. Works fine. When i call viewTodo from menu the data ist loaded and displayed correctly: mounted () { this.loadTodos(); }, When i add a new todo state is also updated. But if i add a new one and come back to "viewTodo.vue" with the back-link, the component didn´t realize that there was some change or whatever. [Vuex](//muut.com/u/framework7/s1/:framework7:df9G:vuex.jpg.jpg) [Todos1](//muut.com/u/framework7/s1/:framework7:b41t:todos1.jpg.jpg) [Addtodo](//muut.com/u/framework7/s1/:framework7:ejwF:addtodo.jpg.jpg) [Vuex2](//muut.com/u/framework7/s1/:framework7:6oqS:vuex2.jpg.jpg) [Todos2](//muut.com/u/framework7/s1/:framework7:O9eB:todos2.jpg.jpg)

sergeantpepper
Wed, 24 May 2017 13:41:37 GMT

Was not able to watch the $route so i did it this way to update my view. In the "addTodo" component i did: this.$f7.views.main.refreshPreviousPage();