Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Vue: tabbar not updating props
-
I have this code:
Parent.vue
<v-ons-tabbar position="top" :tabs="tabs" :index.sync="activeTab"></v-ons-tabbar> ...... <script> // Tabs import TabOrders from './tabs/TabOrders.vue' import TabCompletedOrders from './tabs/TabCompletedOrders.vue' export default { data () { return { activeTab: 0, test: 0 } }, created: function () { this.tabs = [ { label: 'TAB1', page: TabOrders, props: { test: this.test } }, { label: 'TAB2', page: TabCompletedOrders, props: { test: this.test } } ]
TabOrders.vue:
<template> <v-ons-page> TAB1 <v-ons-row> <v-ons-col>VALUE OF TEST: {{ test }}</v-ons-col> </v-ons-row> </v-ons-page> </template> <script> /* eslint-disable no-tabs */ // Methods import price from '../../js/filterPrice.js' export default { name: 'TabOrders', data () { return { } }, props: ['test'] } </script>
I’m able to set a custom fixed value for
ŧest
prop, but it won’t change when updated from the parent.
test
prop is a variable that should hold a response from an AJAX call, so it has to be set as a default value when starting the application and then changed automatically when the ajax call succeedI’ve also tried to use a simple
setInterval
in the Parent.vuecreated
method to see if anything happens when updating thetest
prop, but it does nothing (except the console.log, so the setInterval works)setInterval(() => { this.test = Math.random() * 1000 console.log(this.prova) }, 3000)
Any idea ?
-
Any idea? The only workaround i have found is setting the tabs variable inside a watcher wstching the variable that i have to use as prop
-
This could be a problem with Onsen UI because we’ve had problems with passing prop updates to the core level from bindings before.
Can you recreate the code in the playground and then click Export to Codepen and link it here please? https://onsen.io/playground/
That way I can run it quickly to see what’s going on.
-
@emccorson said in Vue: tabbar not updating props:
Can you recreate the code in the playground and then click Export to Codepen and link it here please? https://onsen.io/playground/
That way I can run it quickly to see what’s going on.Not easily, it’s a pretty complex application and AFAIK, the playground dosn’t allow to use external vue files. The issue only happen when importing components from external files. Multiple components in the same page (ie, with <template> tags) works fine.
As workaround we are using a watcher, this would trigger the prop update but I think it’s an ugly workaround, props are supposed to be self-updated.
-
@gandalf In that case, can you put a minimum working example up on GitHub?
-
@emccorson
Sorry for the veeeeeeeeeeeeeeeeeeeeeeeeeery long delay.
This is a sandbox: https://codesandbox.io/s/awesome-keldysh-ltpd5
as you can see, there is a variable that is updated every second with a setInterval but the changes is not reflected
to the child when using a tabbar. The “Dummy” component, that is not a tabbar, is updated as expected with the same code.Any idea ?