web-dev-qa-db-fra.com

Utiliser la valeur par défaut si l'argument prop est nul

J'ai ce composant d'avatar simplifié:

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

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

Supposons que je récupère certaines données utilisateur de mon API et qu'elles ne contiennent aucune URL d'avatar. Dans ce cas, je veux que ce composant utilise la valeur par défaut, mais il ne semble fonctionner que lorsque vous lui passez undefined, mais undefined n'est pas valide en JSON, je ne peux donc pas le retourner à partir de la réponse de l'API .

Existe-t-il un moyen de réaliser ce que je veux en passant dans null ou existe-t-il une meilleure façon de gérer cela?

vue.jsvuejs2vue-component
15
Kid Diamond

Je ferais une propriété calculée basée sur la valeur de prop src qui retournera une valeur par défaut si le src est 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>
12
thanksd

Cela devrait faire l'affaire:

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

Et personnellement, je conserverais la valeur par défaut de l'hélice en plus de forcer les valeurs nulles à la valeur par défaut.

Pour autant que je sache, vous ne pouvez pas atteindre ce que vous voulez grâce à la définition d'accessoire.

1
kmc059000

Vous pouvez également explicitement passer undefined en tant que prop si src est null et vous préférez que le composant gère les valeurs par défaut.

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

Selon le code qui récupère les données, vous pourrez peut-être delete de l'objet parent la clé de l'URL. Le composant recevra undefined et utilisera la valeur par défaut.

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);
  }
});
<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>
0
Roy J