有没有办法通过 function 和 vue.js / vuetify 为 v-select 创建默认值

Question

I'm new to vuetify and I want to know if there is a way to assign a value for a v-select with a function. I have an entire form that can create an enterprise. I use apollo.js for the link with my database. When I try to modify an enterprise all the fields fill correctly but I want the v-select to display the same value as the user set. The code for my v-select in my "modify" page:

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

The data:

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"}
],
}),

I tried to do this but I generate many errors:

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";
}

I don't know if I'm quite clear but in the end I just want to know if there is a way to assign or define a value with a function.

Any help is greatly appreciated, thanks!

Answer 1

First things first

defaultSelected{ value: renderQualificationValue } here you missed the: Should be defaultSelected: { value: renderQualificationValue }

Second

What you're looking for is (literally) a computed property

so your code should look like

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>

Third

Theres no point of using v-model there because it will just provide values as a getter, it will not be able to read data from v-select

A slight different approach would be to split your computed property as Getter and 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
      }
  }
//...

Fourth

I think it would be easier if you keep your variable as a number instead of parsing the value every time you read it. So I would covert it on the Setter and not on the Getter, but that depends on your environment

I would do it like this

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)
      }
  }
}

Note:

Computed getters cannot have input parameters, if you need that, you shall use a function instead.