有没有办法通过带有 vue.js / vuetify 的函数为 v-select 创建默认值

Question

我是 vuetify 的新手，我想知道是否有办法为带有函数的 v-select 赋值。我有一个可以创建企业的完整表格。我在数据库中使用 apollo.js 作为 link。当我尝试修改企业时，所有字段都正确填写，但我希望 v-select 显示与用户设置相同的值。我的“修改”页面中 v-select 的代码：

<v-select
 item-text="text"
 item-value="value"
 v-model="defaultSelected"
 :items="qualifications"
 menu-props="auto"
 :rules="SelectRules"
></v-select>

数据：

export Default{
data: () => ({
defaultSelected{ value: "this is where I want to create a function to set a default value for the v-select" }
qualifications: [
 { text: "Blacklisted", value: "0"}
 { text: "Qualified", value: "1"}
 { text: "Non-qualified", value: "2"}
 { text: "High risk", value: "3"}
],
}),

我尝试这样做，但出现了很多错误：

export Default{
 data: () => ({
 defaultSelected{ value: renderQualificationValue }
 qualifications: [
  { text: "Blacklisted", value: "0"}
  { text: "Qualified", value: "1"}
  { text: "Non-qualified", value: "2"}
  { text: "High risk", value: "3"}
 ],
}),

methods: {

 renderQualificationValue(qualification)
  if (qualification === 0) return "0";
  else if (qualification === 1) return "1";
  else if (qualification === 2) return "2";
  else if (qualification === 3) return "3";
}

我不知道我说的是否很清楚，但最后我只想知道是否有一种方法可以使用函数来分配或定义一个值。

非常感谢任何帮助，谢谢！

Answer 1

要事第一

defaultSelected{ value: renderQualificationValue } 你错过了：应该是 defaultSelected: { value: renderQualificationValue }

第二个

您正在寻找的是（字面上）计算的属性

所以你的代码应该看起来像

export Default {
  data: () => ({
    qualifications: [
      { text: "Blacklisted", value: "0" }
      { text: "Qualified", value: "1" }
      { text: "Non-qualified", value: "2" }
      { text: "High risk", value: "3" }
    ],
    qualification: "1"
  }),
  computed: {
    // Returns the Number type of qualification
    qualificationValue () {
      return Number.parseInt(this.qualification)
    }
  }
}

<v-select
 item-text="text"
 item-value="value"
 v-model="qualificationValue"
 :items="qualifications"
 menu-props="auto"
 :rules="SelectRules"
></v-select>

第三

在那里使用 v-model 没有意义，因为它只会提供 getter 的值，它无法从 v-select

读取数据

一种略有不同的方法是将计算出的属性拆分为 Getter 和 Setter

//...
computed: {
    // Returns the Number type of qualification
    qualificationValue {
      get () {
        return Number.parseInt(this.qualification)
      },
      set (newValue) {
        // Here you choose what you want to do while setting
        // For example:
        this.qualification = newValue
      }
  }
//...

第四个

我认为如果将变量保留为数字而不是每次读取它时都解析值会更容易。所以我会在 Setter 而不是 Getter 上隐藏它，但这取决于你的环境

我会这样做

export Default {
  data: () => ({
    qualifications: [
      { text: "Blacklisted", value: "0" }
      { text: "Qualified", value: "1" }
      { text: "Non-qualified", value: "2" }
      { text: "High risk", value: "3" }
    ],
    qualification: 1
  }),
  qualificationValue {
      get () {
        return this.qualification
      },
      set (newValue) {
        this.qualification = Number.parseInt(newValue)
      }
  }
}

注：

计算的getters不能有输入参数，如果你需要，你应该使用函数代替。

有没有办法通过带有 vue.js / vuetify 的函数为 v-select 创建默认值

Is there a way to create a default value for a v-select trough a function with vue.js / vuetify

javascript

vue.js

vuejs2

vuetify.js

要事第一

第二个

第三

第四个

注：