Как я могу отобразить именованный маршрут с помощью v-if при использовании v-for l oop? - PullRequest
Новая
       39

Как я могу отобразить именованный маршрут с помощью v-if при использовании v-for l oop?

0 голосов
/ 21 марта 2020

В моем компоненте я перебираю массив элементов и рендерирую группу фишек . Когда я нажимаю на чип, я могу go перейти на страницу с подробностями; Я могу удалить чип и создать новый.

Когда я создаю новый чип, я получаю следующее предупреждение:

[vue -router] отсутствует параметр для именованный маршрут "item.show": Ожидаемый "id" будет определен

Когда я наводю курсор мыши на каждую фишку, все параметры маршрута присутствуют и являются правильными. Когда я перефразирую sh страницу, все параметры там (и правильные). Я также не получаю это предупреждение. Поэтому я считаю, что это просто вопрос времени. Когда я создаю новый элемент, компонент пытается отобразить результаты до назначения идентификатора.

Очень похоже на этот поток SO

Я не уверен, как обернуть каждую фишку в v-if, так как я привязываюсь к названному маршруту. Я пробовал разные версии обёртывания в <template v-if>, но всё же, так как я уже в v-for, не повезло.

Также попытался использовать вычисляемое свойство, подобное этому: 

:to="myComputedProperty"

Я все равно получу то же предупреждение.

Вот как выглядит моя группа микросхем. condition - это просто логическое значение, которое проверяет, загружаются ли элементы (запрос ajax). Когда ответ возвращается, устанавливается значение true. 

<v-chip-group key="my-group" v-if="condition && && items.length > 0">
    <v-chip class="ma-2" close color="accent" label
        v-for="item in items"
        :key="item.id"
        :to="{ name: 'item.show', params: {'param_one': one.id, 'id': item.id}}"
        @click:close="handleConfirmDeleteDialog(item)">
        <v-icon left>mdi-map-marker</v-icon>
            {{ item.title }}
    </v-chip>
</v-chip-group>

Как мне обернуть :to в v-if, чтобы предотвратить предупреждение?

Что-то вроде этого - то, что мне нужно (явно неверно): 

...
<template v-if="item">
    :to="{ name: 'item.show', params: {'param_one': one.id, 'id': item.id}}"
</template>
...

Спасибо за любые предложения!

...