使用 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: [...]

  }

}

Av-for会导致模板循环遍历所有图像，因此您不希望出现这种情况。删除它并使用selected正确的 src 的图像：

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

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

{

   ...

   url: "samplename.png"

}