Monaca Onsen UI Discord Chat Github Repo

Navigate to page when clicking list item

  • Hi,

    I’m new to Vue.js and OnsenUI.
    I started from vue-cordova-webpack (

    I have a list in a page like this:

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

    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 but I’m not sure whether it’s the good option and I don’t know where to start with it.

    Any help, please?


  • 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)