Vue: tabbar not updating props

gandalf

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 succeed

I’ve also tried to use a simple setInterval in the Parent.vue created method to see if anything happens when updating the test 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 ?

gandalf

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

emccorson

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.

gandalf

@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.

emccorson

@gandalf In that case, can you put a minimum working example up on GitHub?

gandalf

@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 ?