vuejs2 - VueJs + Element UI:如何使用照片 el-select 设置默认值?
问题描述
我有带照片的 el-select 选项,在选项中我可以获取照片变量,但在默认值中我无法通过照片获取默认值。
你能帮助我吗?
预期:默认值为 McDonald(照片 + 标签)
这是我的代码:
<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>
这是我的小提琴:
解决方案
所选值模板和选项模板不同。el-select
允许您为所选模板定义前缀插槽,请查看:https ://jsfiddle.net/budgw/L4y8zw1e/36/
请注意,我更改您el-select
是为了直接使用对象作为选定值。在这种情况下,您必须指定value-key
on el-select
。
推荐阅读
- android - App Bundle (AAB) 和不透明二进制 Blob (OBB) 文件
- python - 如何在python中计算复杂的联立方程?
- firebase - 生成私钥 firebase admin sdk
- android - 片段的布局字段在初始化时为 NULL
- python - pandas 使用多索引进行条件更新
- javascript - 如何在 Javascript 或 Jquery 中处理具有多个循环的大量数组?
- javascript - 可以从 Web 应用程序获取客户端机器的 MAC 地址
- mysql - 使用 SQL 计算保留
- twitter4j - 如何获取推文总数(仅推文数)
- ios - 用于源文件路径的 podspec 参数是什么?