Debido a esto
<v-card-subtitle class="py-0 my-0">{{ vc_rule.url }}</v-card-subtitle> donde this.vc_rule podría estar empty o null . A veces, recibí este error en mi consola.
vue.runtime.esm.js?2b0e:1897 TypeError: no se pueden leer las propiedades de undefined (leyendo 'url')
En lugar de recibir este error, ¿cómo puedo decirle a Vue.js que muestre "vacío" si no hay datos?
Me imagino algo como esto:
Pista : ?
<v-card-subtitle class="py-0 my-0">{{ vc_rule?.url }}</v-card-subtitle>Puede combinar el operador de encadenamiento opcional con el operador de fusión nulo de esta manera:
<v-card-subtitle class="py-0 my-0">{{ vc_rule?.url ?? 'empty' }}</v-card-subtitle>Si entiendo su requisito correctamente, podemos lograrlo en la plantilla HTML mediante el uso del encadenamiento opcional (?.) Junto con el operador de fusión nula (??) .
Demostración de trabajo:
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>Pruebe con 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>