CODEWITHSUNDEEP
vue.jsvuetify.js
Kaspar Püüding
Kaspar Püüding

Reputation: 332

Vuetify v-select item doesn't change value

EDIT I'm using Vuetify's v-select not vue-select component.

When I make the selection nothing happens. Setting initial value works.

template:

<v-select
     :items="accountTypes"
     v-model="formData.AccountName">
</v-select>

script data:

accountTypes: [
  {value: 1, text: "student"},
  {value: 2, text: "company"}
],
formData: {
  FirstName: '',
  LastName: '',
  Email: '',
  AccountTypeId: 1,
  AccountName: 1,
  UserName: '',
  Password: ''
},

I've looked into the source code and I found out that selectItem won't get triggered in v-select's generator line 128 (version 0.14.8, see code below)

const data = {
    on: { click: e => this.selectItem(item) },
    props: {
      avatar: item === Object(item) && 'avatar' in item,
      ripple: true,
      value: active
    }
  }

I've tried upgrading and downgrading modules, but I think there is some kind of a "stupid" mistake somewhere. Thanks for any kind of input :)

My dependencies in package.json: 

"dependencies": {
    "axios": "^0.16.2",
    "express": "^4.15.4",
    "js-cookie": "^2.1.4",
    "nuxt": "^0.10.7",
    "vue": "^2.4.2",
    "vue-server-renderer": "^2.4.2",
    "vue-template-compiler": "^2.4.2",
    "vuetify": "^0.14.8"
  },
  "devDependencies": {
    "cross-env": "^5.0.5",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }
 }

Upvotes: 4

Views: 6376

Answers (1)

Roy J
Roy J

Reputation: 43899

UPDATED
The problem could be that you don't have the very latest version of Vue (the latest Vuetify requires 2.4.1). That's what I ran into in putting this snippet together. This works as expected.

new Vue({
  el: '#app',
  data: {
    accountTypes: [{
      value: 1,
      text: "student"
    }, {
      value: 2,
      text: "company"
    }],
    formData: {
      FirstName: '',
      LastName: '',
      Email: '',
      AccountTypeId: 1,
      AccountName: 1,
      UserName: '',
      Password: ''
    }
  },
})
form {
  width: 50%;
}
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<v-app id="app">
  <form>
    <v-select :items="accountTypes" v-model="formData.AccountName" label="Select" single-line bottom>
    </v-select>
    {{formData.AccountName}}
  </form>
</v-app>

Upvotes: 2

Related Questions