vue.js 数据中未定义带有图像链接的属性

Question

我有一个来自服务器的 json 数组，它看起来像这样：

[{
  "extension": ".jpeg",
  "height": 1080,
  "id": 2640878,
  "metadataOnly": true,
  "name": "84b3250b27f659272161f66ed16e9512.jpeg",
  "originalPost": "https://example.com",
  "orignalImage": "https://example.com/image.jpeg",
  "orignalThumbnail": "https://example.com/image_preview.jpeg",
  "score": 1,
  "width": 1920
}, ... (other similiar objects)]

这个 json 是用 axios 从服务器请求的，并在我的 Vue 实例中设置为数据属性:

let vm = new Vue({
    el: "div#images-list",
    data: {
        images: []
    },

    mounted() {
        axios.get("/get_images").then(response => {
            this.images = response.data;
        })
    }
});

这会将它挂载到指定的块并调用 mounted，axios 获取 json 数组，如果打印它 而没有 分配给 this.images，它打印正常，我看到了所有字段。但是在我将它分配给 this.images 之后，当我尝试从 javascript 控制台打印它们时，包含图像（originalImage 和 originalThumbnail）的字段变得未定义。所有其他字段都起作用并打印它们的值。最后，这里是 HTML（采用 ruby 的 slim 格式）：

doctype html
html
  head
    script src="http://underscorejs.org/underscore-min.js"
    script src="https://vuejs.org/js/vue.js"
    script src="https://unpkg.com/axios/dist/axios.min.js"
  body
    div#images-list
      div v-for="image in images" v-bind:key="image.id"
        a v-bind:href="image.originalImage"
          | {{ image.name }}

    script src="/js/index.js"

这会生成一个包含 a 个元素的页面，其中包含图像名称（来自 image.name）但没有 href 属性（因为链接不知何故未定义）。知道为什么带有图像链接的字段变得未定义（但其他链接没有，例如 originalPost）以及如何解决这个问题？

Answer 1

所以。呃。这是一个错字。不是 original，而是 orignal。没有人注意到。

vue.js 数据中未定义带有图像链接的属性

Properites with image links are undefined in vue.js data

javascript

undefined

slim

vue.js

axios