选择选项条目仅在第一次选择尝试时显示答案

【问题标题】：Select option entries are only shown on the first select attempt选择选项条目仅在第一次选择尝试时显示
【发布时间】：2019-05-07 17:16:52
【问题描述】：

我正在使用 vuetify 并且我正在尝试填充选择框...

...使用这个 JSON 对象：

[
    {
        "configurator": {
            "group": {
                "property": [
                    {
                        "id": "STATUS",
                        "value": [
                            {
                                "id": "OK",
                                "text": "OK"
                            },
                            {
                                "id": "NOK",
                                "text": "not OK",
                                "selected": "true"
                            }
                        ]
                    }
                ]
            }
        }
    }
]

...我正在尝试渲染这个组件：

<v-list v-for="(item, i) in jsonObjPruef.configurator.group.property" :key="i">
  <v-select
    v-model="item.value"
    :items="item.value"
    :label="item.text"
  />
</v-list>

页面加载时没有警告和错误，我可以从预期值（“OK”、“not OK”）中进行选择。

在选择时，例如“OK”显示以下警告：

[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got String with value "OK".

现在如果我要再次选择，我只能选择我之前选择的值（“OK”）。

选择选项条目仅在第一次尝试选择时显示。

知道我在这里缺少什么吗？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

tl;dr: v-model 表示：“保存用户选择的位置”。如果您将其保存在包含您的选项的相同属性上，则选项将消失，<v-select> 已损坏。

v-model 将 jsonObjPruef.configurator.group.property 替换为选定的选项，当您选择它时。这使得<v-select> 不再具有items。

您应该指定一个不同的v-model - 一个模型属性，用于存储选择，（即：results）：

<v-list v-for="(item, i) in jsonObjPruef.configurator.group.property" :key="i">
  <v-select
    v-model="results[i]"
    :items="item.value"
    :label="item.text"
  />
</v-list>

在data中，需要初始化results : {}。

现在results 将保存选定的结果，您可以在其上放置一个观察者以在它发生变化时触发其他功能。它不一定是一个对象，它可以是一个数组。这取决于您目前拥有什么。
显然，您可以将 results 重命名为不那么通用的名称，这在您的具体示例中更有意义。

如果您需要更多帮助，请添加mcve。

【讨论】：