如何从 v-select 访问对象？

Question

这是我的规则。值数组看起来像

"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/[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>

Answer 3

所有答案都很好并且有效， 注意：如果

item-text

不起作用...尝试

item-title