How to access the object from a v-select?-CodePudding

This is my rule.values array look like

"values": [
    {
        "value_display": "Broken clouds",
        "value": "803"
    },
    {
        "value_display": "Clear sky",
        "value": "800"
    }
]

I populate my select like so:

<v-select item-text="value_display" item-value="value" label="Values" v-model="rule.value" :items="rule.values"></v-select>

Right now If do {{ rule.value }}, I only see 800

I would like to access the whole object

    {
        "value_display": "Clear sky",
        "value": "800"
    }

How do access the object out of my selection ?

CodePudding user response：

Add return-object prop to the v-select component to get the whole object :

<v-select return-object item-text="value_display" 
        item-value="value" label="Values" v-model="rule.value" :items="rule.values">
</v-select>

CodePudding user response：

You can use return-object attribute in your v-select component to get the whole object on selection instead of just item-value.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    rule: {
      values: [
        {
          "value_display": "Broken clouds",
          "value": "803"
        },
        {
          "value_display": "Clear sky",
          "value": "800"
        }
      ]
    },
    ruleValue: null
  }),
  methods: {
     getSelectedValue() {
       console.log(JSON.stringify(this.ruleValue));
     }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-select
            :items="rule.values"
            item-text="value_display"
            item-value="value"
            v-model="ruleValue"
            label="Values"
            return-object
            @change="getSelectedValue"
            outlined
          ></v-select>
    </v-container>
  </v-app>
</div>