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?