почему v-for не рендерит все объекты?

Question

Я пытаюсь отобразить результат поиска, который я получаю из API.но v-for не отображает все объекты?

это мое поле поиска:

, как вы видите, есть толькоодин элемент, но все правильно в инструментах vue dev:

и это vue-компонент (v-for):

и вот результат:

что не так?

это данные:

Answer 1

Значение в result является объектом, а не массивом. Хотя можно перебирать объект, используя v-for, маловероятно, что это то, что вы хотите здесь. Ваш объект имеет свойства "0", "1", "2", "3" и "ok". Все 5 из них будут включены в v-for, поэтому у вас есть 5 <li> генерируемых элементов.

Попробуйте изменить код на следующий, чтобы лучше понять, что происходит:

<li v-for="(item, index) in result" :key="index">
    index: {{ index }}
    <br><br>
    item: {{ item }}
</li>

Я бы предложил изменить формат, который вы используете для result, чтобы поместить результаты в массив отдельно от свойства "ok". Таким образом, ваш сервер может вернуть что-то вроде {"ok": true, "results": [...]}, а затем вы можете извлечь свойство "results" и выбросить остальные.

Есть еще одна проблема. В ваших исходных данных у вас есть опечатка в нескольких ваших данных. Свойство "link;" должно называться "link". Обратите внимание на дополнительные ; в конце.

Answer 2

Объект массива может быть нулевым или пустым.

Blockquote

<div class="category-list" v-for="category in categories">
    <router-link :to="{{category.name}}" class="dropdown-item">{{category.text}}</router-link>
</div>

если вы получаете сообщение об ошибке, пришлите мне объект, который находится в массиве.