Recently I started using Vue and decided to implement a dropdown menu component (). The component pulls its list items from a JSON array structured as follows:
<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>
The current functionality displays all the images at once through the v-for loop. However, I want to extract the id/url from the selected name in the dropdown menu and pass it to the <img> tag so that only the corresponding image is displayed below. How can I achieve this? Thank you!