3. Navigate to page when clicking list item

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.

Navigate to page when clicking list item

  • A

    Hi,

    I’m new to Vue.js and OnsenUI.
    I started from vue-cordova-webpack (https://github.com/OnsenUI/vue-cordova-webpack).

    I have a list in a page like this:

    <template>
  <v-ons-page>

    <v-ons-list-title>List</v-ons-list-title>
    <v-ons-list>
      <v-ons-list-item v-for="item in datas" :key="item.link" tappable>
        <div class="left"><v-ons-icon fixed-width icon="fa-book"></v-ons-icon></div>
        <div class="center">{{ item.details.data }}</div>
        <div class="right"><v-ons-icon icon="fa-external-link" @click="goTo(item.link)" :key="item.link"></v-ons-icon></div>
      </v-ons-list-item>
    </v-ons-list>

  </v-ons-page>
</template>

    and I’d like to change page (go to a “details” view) when clicking on the single list item (v-ons-list-item).
    I was looking to https://onsen.io/v2/api/vue/v-ons-navigator.html but I’m not sure whether it’s the good option and I don’t know where to start with it.

    Any help, please?

    Thanks

    0
  • Z

    navigator is the best way to do it. You should create one on your index page and have all the other pages in templates.

    You can then push pages or resetToPages with the navigator. Push page adds it to the navigator page stack so you can have a back button to go back, while resetToPage is pretty self explanatory.

    Use that link you used for further details since it uses the same stack you are(I’m assuming you are using Vue2 with OnsenUI)

    0