fixed the dropdown behaviour

[Nirvanjha2004]

fixes #94

Pull Request: Fix Model Selection Dropdown Variable Conflict

PR Title

Fix v-select variable conflict in Model Selection dropdown

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Description

This PR fixes a critical bug in the Model Selection dropdown where v-model and :items were bound to the same variable, causing type errors and breaking the dropdown functionality.

Problem

The v-select component in MiscConfigCard.vue had both v-model and :items bound to the same models variable. This created a conflict where selecting a model would overwrite the items array with a string value, causing Vue to throw a type error and breaking the dropdown.

Solution

Separated the single models variable into two distinct variables:

• selectedModel: Holds the currently selected model value
• modelOptions: Holds the array of available model options

This ensures the dropdown items remain intact while allowing the selected value to change independently.

Changes Made

Modified Files

• src/components/calibration/MiscConfigCard.vue

Detailed Changes

1. Updated Template (Line 24)

Before:

<v-select v-model="models" :items="models" outlined clearable placeholder="Select Model"></v-select>

After:

<v-select v-model="selectedModel" :items="modelOptions" outlined clearable placeholder="Select Model"></v-select>

2. Updated Data Properties (Lines 36-43)

Before:

data() {
    return {
        backgroundColor: '#FFFFFFFF',
        pointColor: '#000000FF',
        customColors: false,
        models: ['Linear Regression', 'Ridge Regression', 'Lasso Regression', 'Elastic Net', 'Bayesian Ridge', 'SGD Regressor', 'Support Vector Regressor']
    }
},

After:

data() {
    return {
        backgroundColor: '#FFFFFFFF',
        pointColor: '#000000FF',
        customColors: false,
        selectedModel: 'Linear Regression',
        modelOptions: ['Linear Regression', 'Ridge Regression', 'Lasso Regression', 'Elastic Net', 'Bayesian Ridge', 'SGD Regressor', 'Support Vector Regressor']
    }
},

3. Updated Watcher (Lines 52-54)

Before:

models(value){
    this.updateModels(value)
}

After:

selectedModel(value){
    this.updateModels(value)
}

Testing

• Dropdown displays all model options correctly
• Selecting a model works without errors
• No Vue warnings in console
• Clearing selection works properly
• Dropdown remains functional after clear
• Selected model value is properly stored in Vuex store

Before Fix

• Vue error: [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got String
• Clearing selection showed "no data available"
• Dropdown became unusable after first selection

After Fix

• No errors or warnings
• Dropdown works smoothly for select/deselect operations
• All model options remain available at all times
• Proper data flow to Vuex store

Related Issues

Fixes issue documented in `ISSUE_MODEL_SELECTION_VSELECT.md

Screenshots

Before Fix:-
https://github.com/user-attachments/assets/6ff1ca1d-1684-475d-bad3-56bfd9307fa4
After fix:-

AfterFixEyeTracker.mp4

Checklist

• Code follows the project's style guidelines
• Self-review of code completed
• Changes generate no new warnings
• Functionality tested in development environment
• No breaking changes introduced