臨摹微笑
2023-10-14 18:40:57
我是 Vue 新手,我正在使用這個下拉菜單組件(https://ej2.syncfusion.com/vue/documentation/drop-down-list/data-binding/)從 json 數(shù)組中提取列表項看起來像這樣:<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>目前所做的只是通過循環(huán)一次列出所有圖像v-for,但我想從下拉菜單中選定的名稱中獲取 id/url 并將其傳遞給標(biāo)簽,<img>以便在下面僅顯示相應(yīng)的圖像,我該怎么做呢?謝謝!
1 回答

森林海
TA貢獻(xiàn)2011條經(jīng)驗 獲得超2個贊
您的下拉列表需要v-model="selected"綁定才能將所選圖像傳達(dá)給父級:
<ejs-dropdownlist v-model="selected"></ejs-dropdownlist>
data() {
return {
selected: null, // Used by the dropdown
images: [...]
}
}
Av-for會導(dǎo)致模板循環(huán)遍歷所有圖像,因此您不希望出現(xiàn)這種情況。刪除它并使用selected正確的 src 的圖像:
<img v-if="selected" :src="require('@/assets/pics/' + selected.url)">
另一個問題是您的圖像對象應(yīng)該只有圖像的名稱,因為路徑assets被硬編碼到src綁定中:
{
...
url: "samplename.png"
}
添加回答
舉報
0/150
提交
取消