Passing state inside v-ons-navigator page

gus_honorato

Hello,

I’m having some difficulties to pass the initial state to the page of ons-navigator. I have a list of expenses and when the user clicks (or taps) an expense item I want to show an edit page stacked with the expense data.

//Expenses.vue
<template>
<v-ons-list-item tappable v-for="e in expenses" @click="editExpense(e)">
// item contents omitted
</v-ons-list-item>
</template>
<script>
//...
methods: {
  editExpense(expense) {
    var expView = new ExpenseView({ 
      propsData: { expense: expense } //!!! It don't work !!!
    }) 
    this.$bus.$emit('push-page', expView)
  }
}
//...
</script>

//App.vue
<template>
  <div id="app">
    <v-ons-navigator swipeable :page-stack="pageStack"></v-ons-navigator>
  </div>
</template>

<script>
mounted: function(){
  this.$bus.$on('push-page', (page, expense)=>{
    this.pageStack.push(page)
  });
</script>
}

I know that there is a way to do that but I can’t figure out. Anyone can help me?