首页 > 解决方案 > 从数据返回中检索图像以将其包含在下拉过滤器中

问题描述

Good Day 开发人员我只是在玩下拉菜单,想知道如何检索已经存储在数据返回中的图像作为我的资产中的字符串路径,以便在我的下拉列表中显示它。这是我的情况:

首先数据返回对象数组,我在其中存储图像和其他项目

Data Return

rateScale:[
          {Points:5 ,src: require("../assets/5stars.png")},
          {Points:4 ,src: require("../assets/4stars.png")},
          {Points:3 ,src: require("../assets/3stars.png")},
          {Points:2 ,src: require("../assets/2stars.png")},
          {Points:1 ,src: require("../assets/1stars.png")},
      ],

然后在我的计算属性上,我得到一个迭代这个对象的函数,我得到下拉构建。

COMPUTED PROPERTIES

    computedRates(){
      let setRate=new Set();
       this.rateScale.forEach(element => {
        setRate.add( element.Points)
      });
      return Array.from(setRate)

    },

如果我尝试像以前的函数集一样仅访问对象中的项目点,则效果很好:在此处输入图像描述

但是,如果我尝试代替 item Points 将其添加到 src 以对图像收费,那么可以说:

computedRates(){
      let setRate=new Set();
       this.rateScale.forEach(element => {
        setRate.add( element.src)
      });
      return Array.from(setRate)

    },

这是结果: 在此处输入图像描述

我的想法是让图像显示出来,并将它们与 th Points 项目连接起来,就像某种

落下:

5 图片 4 图片 3 图片 2 图片 1 图片

所以你能给我任何关于如何使图像显示在我的下拉列表中的建议。必须说每个图像路径我都是正确的。提前谢谢!!!祝你有美好的一天!

标签: javascriptvue.js

解决方案


推荐阅读