如何通过检查 Vue 组件中的值来传递 "conditional" 默认值

Question

组件

props: {
  image: {
    type: String,
    default() {
       return this.defaultImage
    }
  }
},

computed: {
  defaultImage() {
     return this.$config.baseUrl + '/images/default.jpg'
  }
},

使用上面的组件，当 prop-image 不存在时，组件 returns default-image 成功。

<image-uplaoder />

但我想实现，如果我传递 prop-image 的值并且该值为 null，它应该仍然是 return default-image。目前，return没什么。

<image-uplaoder :image="data.image" />

试过（我们不能做类似的事情）吗？

computed: {
  defaultImage(value) {
    if(!value || value === null) {
      return this.$config.baseUrl + '/images/default.jpg'
    }
  }
},

Answer 1

而不是 prop 的 default() 选项，计算的属性应该包含使用默认值的逻辑：

// ImageUploader.vue
export default {
  props: {
    image: String,
  },
  computed: {
    imgUrl() {
      return this.image || (this.$config.baseUrl + '/images/default.jpg')
    }
  }
}

然后将计算的属性绑定到您的 <img>.src:

<img :src="imgUrl">

demo

如何通过检查 Vue 组件中的值来传递 "conditional" 默认值

How to pass "conditional" default value by checking its value in the Vue component

vue.js

vuejs2

nuxt.js