How can I show "empty" if data is not there?-CodePudding

Because of this

<v-card-subtitle >{{ vc_rule.url }}</v-card-subtitle>

where this.vc_rule could be empty or null. Sometimes, I got this error on my console.

vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'url')

Instead of getting this error, how can I tell Vue.js to show "empty" if data is not there?

I envision something like this :

Hint: ?

<v-card-subtitle >{{ vc_rule?.url }}</v-card-subtitle>

CodePudding user response：

You can combine the optional chaining operator with the nullish coalescing operator like this :

<v-card-subtitle >{{ vc_rule?.url ?? 'empty' }}</v-card-subtitle>

CodePudding user response：

Try with Logical_OR -> ||

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      vc_rule: null
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-card>
      <v-card-subtitle >{{ vc_rule?.url || 'empty' }}</v-card-subtitle>
    </v-card>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

CodePudding user response：

If I understand your requirement correctly, we can achieve that in the HTML template itself via use of Optional chaining (?.) along with Nullish coalescing operator (??).

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      vc_rule: null
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-card-subtitle >{{ vc_rule?.url ?? 'empty' }}</v-card-subtitle>
</div>