CODEWITHSUNDEEP
vue.jsvuetify.js
Pok3r Princ3
Pok3r Princ3

Reputation: 147

Vuetify v-select wont re-route

I'm using Vuetify's <v-select></v-select> and i'm trying to re-route the user to different paths, but i can't get it to work. Here's my code, can someone point out what i'm doing wrong? Thanks in advance!

<v-select
  :items="items"
  @:change="changePath"
  item-text="name"
  item-value="path"
  label="Select"
  solo
></v-select>

 export default {
    data: () => ({
      items: [
        {
          name: "machines",
          path: "/machines"
        },
        {
          name: "machines1",
          path: "/machines1"
        },
        {
          name: "machines2",
          path: "/machines2"
        },
        {
          name: "machines3",
          path: "/machines3"
        }
      ] 
   }),

  methods: {
    changePath(items) {
      this.$router.push({ path: this.items.path });
    }
  }
}

Upvotes: 0

Views: 162

Answers (1)

eradima
eradima

Reputation: 81

The first thing I noticed (which might be a typo), is the @:change. This should just be @change.

The second thing (which is probably the actual issue), is in the changePath method. You are assigning this.items.path to the path in the object but it should be the item passed to the method.

this.$router.push({ path: items });

//Edit: I created a small fiddle with a router-view as a demo

Upvotes: 2

Related Questions