'How can I display a default value if the expected value is null?

Is there away to display a default value if the expected value is null?

Ex.

<v-card-subtitle class="py-0 my-0">{{ user.name??'n/a' }}</v-card-subtitle>
vue.jsvuejs2vue-componentvuetify.js


Solution 1:[1]

If you really want it in the template, you could use

<v-card-subtitle class="py-0 my-0">{{ user.name || 'n/a' }}</v-card-subtitle>

But I do heavily recommend using it in the script section, will give you more flexibility and keep the template simple and clean.

Solution 2:[2]

Maybe with computed property:

new Vue({
  el: "#demo",
  data() {
    return { text: null }
  },
  computed: {
    textVal() {
      return this.text || 'n/a'
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p> {{ textVal }} </p>
</div>

Solution 3:[3]

In case you have several items that might need 'n/a', you could try this

<v-card-subtitle class="py-0 my-0">{{ user.name | handleEmptyValue }}</v-card-subtitle>

<script>
import _ from "lodash";

export default {
  filters: {
    handleEmptyValue(value) {
      return _.isEmpty(value) ? "N/A" : value;
    }
  }
};
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu
Solution 2 Nikola Pavicevic
Solution 3 kissu

Related Questions