Question

在我的组件中，我正在遍历一系列项并呈现chip group。单击芯片时，可以转到详细信息页面；我可以删除芯片并创建一个新芯片。

当我创建新芯片时，我得到以下警告：

[vue-router]缺少命名路由“ item.show”的参数：预期要定义的“ id”

当我将鼠标悬停在每个芯片上时，所有的路由参数都在那里并且是正确的。当我刷新页面时，所有参数都在那里（并且正确）。我也没有得到那个警告。因此，我相信这只是时间问题。当我创建一个新项目时，该组件试图在分配ID之前呈现结果。

非常相似

我不确定如何将每个芯片包装在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>
...

谢谢您的任何建议！

在使用v-for循环时，如何使用v-if渲染命名路由？

0 个答案: