Question

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

页面加载时没有警告和错误，我可以从期望值（“确定”，“不正确”）中进行选择。

在选择例如“确定”，将显示以下警告：

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

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

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

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

Answer 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。

选择选项条目仅在首次选择尝试时显示

1 个答案: