框架:帶有Headlessui組件的nuxt 3和vuejs3

我有一個產品選擇器的問題:當用戶點擊最后一個項目時，它會自動向左滾動(失去選中項目在屏幕上的可見性)。

你可以在這段錄音中檢查這種行為，或者你可以打開網站，用chrome調試器將其置于移動模式。

這是我的代碼:

<template>
    <div>       
        <RadioGroup v-model="optionSelected">
            <RadioGroupLabel>
                <span v-if="optionsGroup.title" class="block font-semibold mb-2">{{ optionsGroup.title }}</span>
                <span v-else class="block font-semibold mb-2">{{ $t('product.choose_option') }}</span>
            </RadioGroupLabel>

            <div :class="`lg:grid-cols-${columnsGrid}`" class="overflow-x-scroll lg:overflow-x-auto flex flex-nowrap lg:grid gap-4" >
                <RadioGroupOption as="template" v-for="item in optionsGroup.items" :key="item.value" :value="item.value" :disabled="!item.stock" v-slot="{ active, checked }">
                    <div :class="[item.stock ? 'bg-white shadow-sm text-gray-900 cursor-pointer' : 'bg-white shadow-sm text-gray-400 cursor-not-allowed', active ? '' : '', 'text-center group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium hover:bg-gray-50 sm:flex-1 sm:py-4 min-w-[38%] xl:min-w-0']">
                    <RadioGroupLabel as="span">
                        <div v-if="item.imageSrc">
                            <img  class="mx-auto tw-img" :src="item.imageSrc" alt="product mini">
                        </div>
                        <div class="font-semibold">
                            {{ item.name }}
                            <div v-if="!item.stock" class="text-red-500"><b>{{ $t('common.no_stock') }}</b></div>
                        </div>
                        <div class="text-gray-500" v-if="item.miniText">{{ item.miniText }}</div>
                        <div>
                            <span class="text-dark" v-if="item.price">{{ $currency(item.price) }}</span>
                            <span class="text-sm -2 text-gray-500 line-through" v-if="item.priceOriginal>item.price">
                                <small>{{ $currency(item.priceOriginal) }}</small>
                            </span>
                        </div>
                    </RadioGroupLabel>
                    <span v-if="item.stock" :class="[active ? 'border-2' : 'border-2', checked ? 'border-indigo-500' : 'border-transparent', 'absolute -inset-px rounded-md pointer-events-none']" />
                    <span v-else class="absolute -inset-px rounded-md border-2 border-gray-200 pointer-events-none">
                        
                    </span>
                    </div>
                </RadioGroupOption>
            </div>
        </RadioGroup>
    </div>
</template>

<script setup lang="ts">
const {t} = useI18n()

import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue' 
import { TProductOptionsCategoryLevel, TProductOption } from '@/types/site'
import { PropType } from '@vue/runtime-core';

const props = defineProps({        
    optionsGroup: {
        type: Object as PropType<TProductOptionsCategoryLevel>,
        required: true,
    }    
})

const emit = defineEmits<{
  (e: 'change', item:TProductOption): void
}>()

const productOptionsColumnGrid = props.optionsGroup.items.length;
let columnsGrid:number;

if (productOptionsColumnGrid >= 6) {
    columnsGrid = 4;
} else if(productOptionsColumnGrid == 5) {
    columnsGrid = 3;
}   
 else {
    columnsGrid = productOptionsColumnGrid;
}


const optionSelected = ref(props.optionsGroup.items.find((i:any)=>{     
    return i?.selected
})?.value);

watch(optionSelected, (current, previus)=> {      
    
    const el:any = props.optionsGroup.items.find((i:TProductOption)=>i.value == current);
    emit('change', el);
})

</script>