使用 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>&nbsp;data() {&nbsp; return {&nbsp; &nbsp; selected: null, // Used by the dropdown&nbsp; &nbsp; images: [...]&nbsp; }}Av-for会导致模板循环遍历所有图像，因此您不希望出现这种情况。删除它并使用selected正确的 src 的图像：<img v-if="selected" :src="require('@/assets/pics/' + selected.url)">另一个问题是您的图像对象应该只有图像的名称，因为路径assets被硬编码到src绑定中：{&nbsp; &nbsp;...&nbsp; &nbsp;url: "samplename.png"}