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

by

0👍

✅

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.

Leave a comment