vue根据后端数据动态修改界面组件属性的问题

Question

最近在用Vue-element-admin调用百度地图，创建了许多线性覆盖物：

<script>
import speedApi from '@/api/speedsearch'
export default {
  name: 'BmapDemo',
  data() {
    return {
      options: [{
        value: '15',
        label: '15分后'
      }, {
        value: '30',
        label: '30分后'
      }, {
        value: '45',
        label: '45分后'
      }, {
        value: '60',
        label: '60分后'
      }],
      value: '',
      speedlist: {
        id: '',
        fif: '',
        thir: '',
        fou: '',
        six: ''
      }
    }
  },
  mounted() {
    // 2. 创建地图示例
    var map = new window.BMapGL.Map('container')
    // 3. 设置中心点坐标
    var point = new window.BMapGL.Point(116.400747, 39.983412)
    // 4. 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15)
    // 5. 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
    map.addEventListener('click', (data) => {
      // point包含了经纬度
      console.log(data.point)
      // polyline17.setStrokeColor('green')
    })
    var polyline1 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360431, 39.992534),
      new window.BMapGL.Point(116.360899, 39.987103)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline1)
    var polyline2 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360899, 39.987103),
      new window.BMapGL.Point(116.360827, 39.982182)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline2)
    var polyline3 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360827, 39.982182),
      new window.BMapGL.Point(116.361438, 39.973778)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline3)
    var polyline17 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.387632, 39.983316),
      new window.BMapGL.Point(116.38677, 39.974525)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline17)
    var polyline16 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.386626, 39.988457),
      new window.BMapGL.Point(116.387632, 39.983316)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline16)
  },
  methods: {
    changecolor(id, speed) {
      if (speed >= 5) {
        window['polyline' + id].setStrokeColor('green')
      } else if (speed >= 2 && speed < 5) {
        window['polyline' + id].setStrokeColor('yellow')
      } else {
        window['polyline' + id].setStrokeColor('red')
      }
    },
    paintmap() {
      speedApi.paintmap(this.value).then(response => {
        this.speedlist = response.data.row
        console.log(this.speedlist)
        for (var i = 0; i < this.speedlist.length; i++) {
          if (this.speedlist[i].fif != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].fif)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].fif)
          } else if (this.speedlist[i].thir != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].thir)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].thir)
          } else if (this.speedlist[i].fou != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].fou)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].fou)
          } else {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].six)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].six)
          }
        }
      })
    }
  }
}
</script>

我的method里的changecolor是用来根据后端传回的ID和速度修改前端对应线性覆盖物的颜色的，但是运行一直报错，想请教下该怎么修改这个方法。

这个是报错的内容

Answer 1

在 changecolor 方法中的 setStrokeColor 方法调用失败，可能是由于前端未正确获取到线性覆盖物对象或未正确设置线性覆盖物的属性。
可以在方法调用之前使用 console.log 或者 Vue.js 的开发工具来打印相关对象，以确保正确获取到了对应的对象，可以在 changecolor 方法中添加一些调试信息或者直接在浏览器的开发者工具中调试代码，以确保 setStrokeColor 方法可以被正确调用