Vuetify v-select项目不会更改值

时间:2017-08-12 19:45:49

标签: vue.js vuetify.js

编辑我正在使用Vuetify's v-select而不是vue-select component

当我做出选择时,没有任何反应。设置初始值有效。

模板:

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

脚本数据:

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

我查看了源代码,发现selectItem不会在v-select的生成器行128中触发(版本0.14.8,见下面的代码)

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

我尝试升级和降级模块,但我认为某处存在某种“愚蠢”的错误。感谢您提供任何意见:)

我在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"
  }
 }

1 个答案:

答案 0 :(得分:2)

<强>已更新
问题可能是你没有最新版本的Vue(最新的Vuetify需要2.4.1)。这就是我把这个片段放在一起所遇到的。这可以按预期工作。

&#13;
&#13;
form {
  width: 50%;
}
&#13;
<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>
&#13;
  activity.Locale = "es-ES";
&#13;
&#13;
&#13;