我是 Vue 新手，我正在使用这个下拉菜单组件（https://ej2.syncfusion.com/vue/documentation/drop-down-list/data-binding/）从 json 数组中提取列表项看起来像这样：<template> <div id="app"> <div id='container'> <ejs-dropdownlist id='dropdownlist' placeholder='Pick a name' :dataSource='images' :fields='fields'></ejs-dropdownlist> </div> <img v-for="image in images" :key="image.url" :src="require('@/assets/pics/' + image.url)"> </div></template><script> export default { data() { return { images: [ { id: 'm1', name: 'Sample Name', url: "../assets/pics/samplename.png" },... ], fields : {text:'name', value:'id'} } } }</script>目前所做的只是通过循环一次列出所有图像v-for，但我想从下拉菜单中选定的名称中获取 id/url 并将其传递给标签，<img>以便在下面仅显示相应的图像，我该怎么做呢？谢谢！
1 回答
森林海
TA贡献2011条经验 获得超2个赞
您的下拉列表需要v-model="selected"绑定才能将所选图像传达给父级：
<ejs-dropdownlist v-model="selected"></ejs-dropdownlist>
data() {
return {
selected: null, // Used by the dropdown
images: [...]
}
}
Av-for会导致模板循环遍历所有图像，因此您不希望出现这种情况。删除它并使用selected正确的 src 的图像：
<img v-if="selected" :src="require('@/assets/pics/' + selected.url)">
另一个问题是您的图像对象应该只有图像的名称，因为路径assets被硬编码到src绑定中：
{
...
url: "samplename.png"
}
添加回答
举报
0/150
提交
取消