VueJs + Element UI: How to set default value with photo el-select?

Question

I've el-select option with photo, in option i can get photo variable but in default value i can't get defult value with photo.

can you help me?

Expected: default value is McDonald (photo + label)

here my code:

<el-select v-model="value" placeholder="Select">
   <el-option v-for="item in outlet" :key="item.value" :label="item.label" :value="item.value">
     <img :src="item.photo"> {{ item.label }}
   </el-option>
</el-select>

and here is my fiddle:

https://jsfiddle.net/dede402/L4y8zw1e/10/

Answer 1

The selected value template and options templates are differents. el-select allow you to define a prefix slot for the selected template, take a look at : https://jsfiddle.net/budgw/L4y8zw1e/36/

Note that I change your el-select in order to use directly an object as selected value. In that case you have to specify the value-key on el-select.