Dealing with object properties that may not always be present in Vue.js template tags

Encountering a fatal error 

TypeError: Cannot read properties of null (reading 'propThatSometimesDoesNotExist')
when utilizing the code below:

<template>
  <div>
    <img v-if="obj.propThatSometimesDoesNotExist" :src="obj.propThatSometimesDoesNotExist">
  </div>
</template>

A computed property resolves the issue, but it's not suitable for my specific situation (the above code is a simplified excerpt from my project).

Is there a way to maintain the syntax above while preventing fatal errors? Possibly utilizing something similar to optional chaining, like 

:src="obj?.propThatSometimesDoesNotExist"
(even though this syntax is not functional)?

javascriptvue.jsvuejs2

Answer №1

Consider using the && operator in the following condition to make sure the object is not null:

 <img v-if="obj && obj.propThatSometimesDoesNotExist" :src="obj.propThatSometimesDoesNotExist">

Keep in mind that the v-if directive prioritizes high property when used with other attributes and directives, ensuring the value is checked before adding to the src attribute.

Answer №2

Utilize optional chaining when using v-if:

new Vue({
  el: '#demo',
  data() {
    return {
      obj: null
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <img v-if="obj?.propThatSometimesDoesNotExist" :src="obj.propThatSometimesDoesNotExist" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the Vue component object while inside the FullCalendar object initialized within the component

When using Full Calendar with VueJS, I ran into a problem where I needed to open a custom modal when clicking on a time slot in the calendar. The issue was that I couldn't call a function outside of the Full Calendar object to handle this. This is bec ...

javascriptvue.jsfullcalendarvuex

How can child components in ReactJS be conditionally rendered based on the status of userData loading?

It seems like there might be an issue with how we handle user login in our application. Whenever a user logs in, the redux state is updated with the server response. Many components rely on this logged-in status. We pass the currentUser object down to all ...

javascriptreactjs

Modify a unique element within an array stored in the state using Redux toolkit

I'm currently attempting to modify a property of an object within an array stored in my state. export const changeStatus = createAsyncThunk('changeStatus', async (arg) => { const todo = arg const response = await axios.put(`${URL} ...

javascriptreactjsreduxreact-reduxredux-toolkit

jQuery click event handler performing no action

I am encountering an issue with the input on my index page: <input type="button" name="goReplaceAll" value="Go" id="allReplaceGo" style="cursor:hand;" /> There is an onclick call from jQuery as follows: $(document).ready(function() { $(&ap ...

javascriptjqueryajax

Displaying the combined total for each date

My goal is to calculate the total for each department without duplicates ( which is currently working ) and display all results based on the selected date. I intend to select a date using md-datepicker and then only display the total task time where the d ...

javascriptangularjs

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

javascriptjquerycssif-statement

Designing a dropdown menu within displaytag

I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page. Here is an example scenario before clicking the Detail ...

javajavascriptajaxdisplaytag

In Vue Js, the function createUserWithEmailAndPassword does not exist within _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default

My createUserWithEmailAndPassword function seems to be malfunctioning. Here is the code snippet I am using - config.js import firebase from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' const firebaseCon ...

javascriptfirebasevue.jsfirebase-authenticationvuejs3

Could you display the picture prior to the function commencing?

This is the image that needs to be loaded before the loop begins. <div id="attendenceGridDivLoader" style="display:none"> <img src="<?php echo base_url() . 'images/loader.gif'; ?>" /> </div> <select onchange=checkAll ...

javascriptjquery

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

javascriptvue.jsvuejs3

How come it functions with $scope but fails with `this`?

I am trying to figure out why my code only works with scripts 1 and 3, but not with script 2. I need this functionality for my project because I can't use $scope. Thank you!! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19 ...

javascripthtmlangularjsscopeangularjs-scope

Is it possible to use jQuery to refresh only a section of the page and modify the URL at the same time?

There is a page (http://myflashpics.com/picture/p9e0) that displays user information along with a small thumbnail on the side. Currently, when clicking on the image, it redirects to a different page and the sidebar reloads as well. I am curious if it' ...

javascriptjqueryajax

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss

Utilizing the Filter Function to Eliminate an Element from an Array

I am a beginner in the world of React and I'm currently working on developing a simple timesheet tool where users can add tasks and save them. My tech stack includes React and Typescript. Currently, my main component has an empty array for tasks and ...

javascriptreactjstypescriptfunctionevents

What could be causing my React child component to not update when changes are made to an array passed down in props after fetching new data?

My Profile.js component is responsible for fetching activity data related to a specific user from the URL parameter and updating the profileActivity state. This state is then passed down to my child component, ProfileActivity.js, where it should be display ...

javascriptreactjsfirebasegoogle-cloud-firestorereact-hooks

Issue with handling .bind in Angular's karma/jasmine tests Angular's karma/j

When writing unit tests for my functions, I encountered an issue with a bound function in the test runner. The problem arose when trying to bind a function to have reference to 'this' inside an inner function. Here is the code snippet in question ...

javascriptangularjskarma-runnerkarma-jasmine

Divs are the preferred placeholders over inputs and textareas

For the past few weeks, I have been trying to tackle a problem with creating placeholders that guide users on where to type. My goal is to make these placeholders disappear when users start typing and reappear if the div is empty again. All my attempts so ...

javascriptjqueryplaceholder

Validating image dimensions with the data-parsley plugin

Is there a way to validate image dimensions with data-parsley? I attempted the code below, but it is not working. data-parsley-dimensions-options='{ "min_width": "100", "max_width": "100", "m ...

javascriptphpjsonparsley.js

Unable to destructure the 'reservations' property from 'this.props.reservation' due to its undefined status, implementing a filter in ReactJs

I am having trouble retrieving reservations from my server when I try to access the rooms. I have followed a similar method but for some reason, I can't seem to access them. My goal is to retrieve reservations from the server and filter them based on ...

javascriptreactjsmongodbexpress

How can I add an object to an array of objects in Vue.js?

Hey there! I'm new to Vue and currently working on understanding the whole concept of Vue and how to use it. Right now, my focus is on learning lists. JS: Vue.config.productionTip = false; new Vue({ el: '#app', data: { items: [ ...

javascriptarraysvue.js