How to disactivate the last breadcrumb in InertiaJS?-CodePudding

I am trying to disactivate the last crumb in InertiaJS (Laravel Vue3) but I think I have an error or something missing somewhere. The error I am getting is the "isLast" is not defined.

isLast: This method simply takes in an index of the crumb array and checks if that crumb is the last one in the list. selected: This is a simple method that emits an event whenever a crumb is selected. The event is then caught by Example.vue… Here is the code:

BreadCrumb.vue

<template>
  <div>
    <ol >
      <li
          v-for="(crumb, ci) in crumbs"
          :key="ci"
        >
        <div >
          <icon name="arrow"/>
          <Link :href="`/${crumb}`" as="button" type="button" : @click="selected(crumb)"  >
            {{ 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 >
    <breadcrumb  :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>

CodePudding user response：

I would recommend binding the disabled-attribute

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