A Vue mixin that handles keeping the index for a given collection in bounds.

keepIndexInBounds.js

export default (collectionName, indexName = "selectedIndex", cycle = false) => {
    return {
        watch: {
            [indexName](newValue, oldValue) {
                if (this[collectionName] === undefined) {
                    return;
                }

                let highestIndex = this[collectionName].length - 1;

                let indexIsTooHigh = newValue > highestIndex;
              
                let indexIsTooLow = newValue < 0;

                if (indexIsTooHigh) {
                    this[collectionName] = cycle ? 0 : oldValue;
                }

                if (indexIsTooLow && !cycle) {
                    this[collectionName] = cycle ? highestIndex : oldValue;
                }
            }
        }
    };
};