Redirect to page depending on ion-select value

Ionic Framework Ionic Vue
1

Hi everybody,

I’m a very beginner and “rookie” in Ionic vue (let’s say in programming generally). I want to create a simple application and therefore I want a Dropdown-menu (Ion-select) showing a variety of machines. After selecting and clicking “OK”, I want the app to direct me to the specific machine page. How can I do this?

            <ion-item>
                <ion-select label="Stacked label" label-placement="stacked" placeholder="Select Machine" @ionChange="handleChange($event)">
                    <ion-select-option value="Machine 1">Machine 1</ion-select-option>
                    <ion-select-option value="Machine 2">Machine 2</ion-select-option>
                    <ion-select-option value="Machine 3">Machine 3</ion-select-option>
                    <ion-select-option value="Machine 4">Machine 4</ion-select-option>
                    <ion-select-option value="Machine 5">Machine 5</ion-select-option>
                    <ion-select-option value="Machine 6">Machine 6</ion-select-option> 
                </ion-select>
            </ion-item>

…

methods: {
    handleChange(ev) {
        
    }
}

Or asking differently: What is my method?

Thank you in advance and sorry for this (possibly) stupid question!

2

Welcome! Nice to see another Vue user!

You are on the right track. Here is a StackBlitz with an example. Sorry I am using the Vue Composition API :slight_smile:

With the Options API, you would do something like this.$router.push('/radio')

3

Hey twestrick,

You’re StackBlitz is ts, however mine is js.

Do you know how to do this with js?

Would be great to get another answer from you.

Thank you :slight_smile:

4

You should be able to figure it out :innocent: :nerd_face:

But, I converted it to the Options API and no TS for you anyways :smile:

1 Like
5

Sorry, as I already said, I’m a “little bit” amateurish :see_no_evil:

So now the path is entered in the address line. So thanks for that.

However the page is not loading. If I refreh, nothing is shown (altough the page is existing). This is also the case for other pages from my app.
If I refresh the “Homepage” everything works… however if I refresh with the other paths in the address line, only a white screen is showing.

So I have to fix this now and then everything is working properly :).

Thank you for your help!!

1 Like