如何禁用 InertiaJS 中的最后一个面包屑？

Question

我正在尝试禁用 InertiaJS（Laravel + Vue3）中的最后一个面包屑，但我认为我有错误或某处遗漏了一些东西。 我收到的错误是未定义“isLast”。

isLast：此方法只接受 crumb 数组的索引并检查该 crumb 是否是列表中的最后一个。 selected: This is a simple method that emits an event whenever a crumb is selected. 然后该事件被 Example.vue 捕获...这是代码：

面包屑.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>

例子.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)" >
             👆