使用 Vue 使用下拉菜单更改 <img> src

Question

我是 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> 标记以下面只显示相应的图像，我该怎么做呢？谢谢！

Answer 1

您的下拉菜单需要v-model="selected" 绑定才能将所选图像传达给父级：

<ejs-dropdownlist v-model="selected"></ejs-dropdownlist> 

data() {
  return {
    selected: null, // Used by the dropdown
    images: [...]
  }
}

v-for 会导致模板循环遍历所有图像，因此您不希望这样。删除它并使用 selected 图像作为正确的 src：

<img v-if="selected" :src="require('@/assets/pics/' + selected.url)">

另一个问题是您的图像对象应该只有图像的名称，因为 assets 路径被硬编码到 src 绑定中：

{
   ...
   url: "samplename.png"
}