Question

我有这个简化的头像组件：

<template>
  <img :src="src">
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    src: {
      type: String,
      default: '/static/avatar-default.png'
    }
  }
}
</script>

我们说我从我的API获取一些用户数据，但它不包含头像URL。在这种情况下，我希望此组件使用默认值，但它只在向undefined传递时才起作用，但undefined在JSON中无效，因此我无法从API响应中返回该值。 / p>

有没有办法通过传递null来实现我想要的东西，还是有更好的方法来处理这个问题？

Answer 1

如果src为src，我会根据null道具值创建一个计算属性，该值将返回默认值：

<template>
  <img :src="source">
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    src: { type: String }
  },
  computed: {
    source() {
      return this.src || '/static/avatar-default.png';
    }
  }
}
</script>

Answer 2

这应该可以解决问题：

<template>
  <img :src="src || '/static/avatar-default.png'">
</template>

就个人而言，除了将空值强制为默认值外，我还会保留道具的默认值。

据我所知，你无法通过道具定义达到你想要的效果。

Answer 3

根据获取数据的代码，您可以从父对象they have many harmful side-effects获取URL的密钥。该组件将收到new Vue({ el: '#app', data: { fetched: { src: '//via.placeholder.com/300x300?text=custom%20image' } }, components: { avatar: { template: '#avatar-template', props: { src: { type: String, default: '//via.placeholder.com/350x150?text=default%20image' } } } }, mounted() { // When you delete src, it uses the default setTimeout(() => Vue.delete(this.fetched, 'src'), 1000); } });并使用默认值。

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<template id="avatar-template">
  <div>
    <img :src="src">
  </div>
</template>

<div id="app">
  <avatar :src="fetched.src"></avatar>
</div>

＆＃13;

amount

＆＃13;

Answer 4

如果undefined为src并且您希望该组件处理默认值，您也可以明确地将null作为道具传递。

<template>
   <img :src="src || undefined">
</template>

如果prop参数为null，则使用默认值

4 个答案: