Vue.js道具始终未定义，显示在Vue devtools中

我有一个图像组件，如下所示：

<template>
    <div :class="wrapperClasses" class="v-image">
        <div class="holder">
            <img :src="imgUrl" alt="" :class="imgClasses">
        </div>
    </div> 
</template>

<script>
export default {
  props: {
    image: {
      type: Object,
      required: true
    },
    divClasses: {
      default: ""
    },
    imgClasses: {
      default: ""
    }
  },
  computed: {
    wrapperClasses() {
      let c = [this.divClasses];
      c.push("aspect-ratio-goes-here");
      return c.join(" ");
    },
    imgUrl() {
      if (this.image) {
        return image.url;
      }
      return "http://via.placeholder.com/600x800?text=Image+coming+soon";
    }
  }
};
</script>

然后我就这样使用它：

<v-image 
   :image='{
    "id":1,
    "model_id":1,
    "collection_name":"photos",
    "name":"medialibrary073ZM0",
    "file_name":"medialibrary073zm0.jpg",
    "mime_type":"image\/jpeg",
    "disk":"public",
    "size":53946,
    "manipulations":[],
    "custom_properties":{"primaryColor":"red"},
    "responsive_images":[],
    "order_column":1,
    "created_at":"2018-04-18 10:48:11",
    "updated_at":"2018-04-18 10:48:11",
    "url":"\/storage\/1\/medialibrary073zm0.jpg"
  }'>
</v-image>

看来一切都很好。但在我的控制台中，我得到以下错误：

[Vue warn]: Error in render: "ReferenceError: image is not defined"

found in

---> <VImage> at resources/assets/js/components/VImage.vue
       <Root>

如果我看一下我的vue开发工具，我会得到以下信息：

发生了什么事？为什么道具没有定义

演示

---

这只是一个简单的错误

imgUrl() {
  if (this.image) {
    return image.url;
  }
  return "http://via.placeholder.com/600x800?text=Image+coming+soon";
}

应该是

imgUrl() {
  if (this.image) {
    return this.image.url;
  }
  return "http://via.placeholder.com/600x800?text=Image+coming+soon";
}

只是错过了这个

此外，对于vue内容，当出现行错误时，调试更容易：

---

未定义什么道具？引用错误：未定义图像–图像。。。除非它是在开发工具中定义的…如果你能@A.Lau，也许可以重新创建这个问题好主意！此行返回image.url；应该是这个返回this.image.url；只是忘记了这一点，当它给你线错误时，发现问题要容易得多。