如何从v-select访问对象？

Question

这是我的rule.values数组，看起来像

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

我的选择如下所示：

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

现在如果做{{ rule.value }}，我只看到800

我想访问整个对象

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

如何从我的选择中访问对象？

Answer 1

将return-object支柱添加到v-select组件中，以获取整个对象：

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

Answer 2

您可以在您的return-object组件中使用v-select属性在选择时获取整个对象，而不仅仅是item-value。

演示

​

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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/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>

​