How to remove elements following the selected element?

Question

Vue.js

I make breadcrumbs, when moving, say, to the middle of the chain, it is necessary that the elements in front are removed from the array, only the active element and what was in front of it remain.
Main->Product Category->Product1->Subcategory->Product2
When clicking on Product1, only the chain
Main->Product Category->Product1 remains.
Now it is implemented so that when switching to a product, the product name is transferred to the breadcrumbs array using the push method.
I understand that something like this is needed:
var count = this.breadcrumbs.length;
this.breadcrumbs.pop(product, count);
On the selected element, the presence of class="active" is implemented, if anything.
Many thanks in advance for your help.

Answer 1

<button v-for="(n, i) in items" @click="onClick(i)">{{ n }}</button>

methods: {
  onClick(index) {
    this.items = this.items.slice(0, index + 1);
    // или
    // this.items.splice(index + 1, this.items.length - index);
  },
  ...
},

https://jsfiddle.net/z3xh2ts4/