如何停用在惯性的最后面包屑?

Question

我正试图停用InertiaJS (Laravel + Vue3)中的最后一个碎屑，但我认为我有一个错误或某些东西丢失的地方。我得到的错误是"伊斯兰"。

isLast:该方法简单地接受crumb数组的索引，并检查该crumb是否是列表中的最后一个。selected:这是一个简单的方法，每当选择面包屑时就会发出一个事件。该事件随后被Example.vue…下面是代码:

BreadCrumb.vue

<template>
<div>
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li
v-for="(crumb, ci) in crumbs"
:key="ci"
>
<div class="inline-flex items-center">
<icon name="arrow"/>
<Link :href="`/${crumb}`" as="button" type="button" :class="{ disabled: isLast(ci) }" @click="selected(crumb)" class="capitalize" >
{{ crumb }}
</Link>
</div>
</li>
</ol>
</div>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
import Icon from '@/Shared/Icon'
export default {
components: {
Icon,
Link,
},
props: {
crumbs: {
type: Array,
required: true,
},
},
methods: {
isLast(index) {
return index === this.crumbs.length - 1;
},
},
}
</script>

Example.vue

<template>
<div class="md:p-12 md:pt-1">
<breadcrumb class="flex pl-4 mb-12" :crumbs="crumbs" @selected="selected"></breadcrumb>  
</div>
</template>
<script>
import Breadcrumb from '@/Shared/Breadcrumb'
export default {
components: {
Breadcrumb,
},
return {
crumbs: ['home','users', 'create'],
}
methods: {
selected(crumb) {
console.log(crumb);
},
},
}
</script>

Answer 1

我建议绑定disabled-attribute

<Link ... :disabled="isLast(ci)" >
👆