Записи опций выбора отображаются только при первой попытке выбора

Question

Я использую vuetify , и я пытаюсь заполнить поле выбора ...

... используя это JSON Object:

[
    {
        "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".

А теперь, если , я пытаюсь выбрать снова. Iтолько может выбрать значение, которое я выбрал до ("ОК").

Записи выбора опции отображаются только при первой попытке выбора.

Любая идеячего мне здесь не хватает?

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 .