Because of this
<v-card-subtitle class="py-0 my-0">{{ 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 class="py-0 my-0">{{ vc_rule?.url }}</v-card-subtitle>
You can combine the optional chaining operator with the nullish coalescing operator like this :
<v-card-subtitle class="py-0 my-0">{{ vc_rule?.url ?? 'empty' }}</v-card-subtitle>
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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-card-subtitle class="py-0 my-0">{{ vc_rule?.url ?? 'empty' }}</v-card-subtitle>
</div>Try with Logical_OR -> ||
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
vc_rule: null
}
}
})<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-card>
<v-card-subtitle class="py-0 my-0">{{ vc_rule?.url || 'empty' }}</v-card-subtitle>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>