CODEWITHSUNDEEP
vue.js
user14761470
user14761470

Reputation:

Dropdown resets in VueJS

I have two independent dropdowns in a form. Below is the code:

<form v-on:submit.prevent="submitForm">
            <div>
                <label for="tenant">Tenant</label>
                <select 
                    class="form-select" 
                    name="" 
                    id="tenant_id"
                    v-model="formValues.tenant_id" >
                    <option disabled value="">Select Tenant</option>
                    <option value="" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
                </select>
            </div>

            <div>
                <label for="chart_type">Type</label>
                <select 
                    class="form-select" 
                    name="" 
                    id="chartOf"
                    v-model="formValues.chartOf"
                    >
                    <option disabled value="">Type</option>
                    <option value="diagnosis">Diagnosis</option>
                    <option value="symptom">Symptom</option>
                    <option value="comorbidity">Comorbidity</option>

                </select>
            </div>

            <div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>

Method for submitting form :

submitForm(){
    console.log('Form values: ', this.formValues)
}

When I select Tenant(1st dropdown), it's fine But when I select 2nd dropdown, the first dropdown resets to the default position(Select Tenant).

I am not able to understand what's happening, as I started learning vue few days ago.

Upvotes: 1

Views: 48

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The option value should be bound to field like id :

<option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>

Upvotes: 1

Related Questions