时间戳

首页 > 解决方案 > 选择选项条目仅在第一次选择尝试时显示

vue.js - 选择选项条目仅在第一次选择尝试时显示

问题描述

我正在使用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.jsvuejs2vuetify.js

解决方案

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。

推荐阅读