CODEWITHSUNDEEP
javascriptvue.js
Wasiq Aftab
Wasiq Aftab

Reputation: 89

Element UI select item is not dynamically setting the value

I am using element UI in my project and I am loading countries dynamically from an API, and the pattern for it is like:

{
country: "Afghanistan"
country_id: 1
nationality: "Afghans"
}

<el-select class="abctest" v-model="value" placeholder="Country" @change="updateDropdowns(index, $event)">
  <el-option v-for="item in country_data" :key="item.country_id" :label="item.country" :value="item.country_id">
  </el-option>
</el-select>

Thats the select I am doing, and this is how I am getting the ID from the database like country_id=1.

If I bind that with value, it just print the 1. I need the country name selected, any idea how I can do that?

I am using VueJS 2 and ElementUI 2.

It's not selecting any country which is coming from database.

Upvotes: 1

Views: 2003

Answers (2)

Wasiq Aftab
Wasiq Aftab

Reputation: 89

issue is fixed. Problem is the response of api. its giving me country_id in string i just convert it into integer and it works

Upvotes: 1

Matheus Valenza
Matheus Valenza

Reputation: 919

Just change :value="item.country_id" to :value="item.country"

Upvotes: 0

Related Questions