Avoid attempting to mount the component if the element identified by its ID does not exist

Currently, I am engaged in a project where a form builder (Symfony) is utilized to create forms. At times, an internal Vue component takes the place of standard TextArea inputs with more versatile HTML-based text editors depending on the input id provided as a prop.

An issue arises when there is no element with the id image_id present on the page, leading to a cascade of JavaScript errors due to the page being rendered using a template.

I am wondering if it is feasible to only mount the image-uploader component if an element with the id #image_id exists on the page and prevent its mounting altogether if the element is absent?

Snippet from Component

mounted() {
            let DOMInput = document.getElementById(this.inputId);
             //component does stuff if not null
            //need to prevent the mounting of this component altogether if it is null

Template

<image-uploader input-id="image_id"></image-uploader>

Answer №1

If you want to display a component only when the image_id is present, you can use the v-if directive:

<image-uploader input-id="image_id" v-if="check if image_id exists"></image-uploader>

new Vue({
  el: "#app",
  data: {
    idExist: null
  },
  mounted () {
    this.idExist = document.getElementById('test')
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div id="test">test</div>
  <div v-if="idExist">Render this if 'test' element is present</div>
</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

Include the selected class in the relative URL

I am attempting to apply a highlight class to my selected category: My code looks like this : <div id="category"> <ul> <a href="category.php?c=electronic"> <li>Electronic</li> </a> ...

Adding objects to an existing array in Vue.js can be a seamless and

Struggling to populate my existing array with elements from a JSON response using a button click. The issue lies in properly adding these elements to the array. I have an empty array named results where I store the data from the response. export default ...

Implementing a change event upon setting a value to an input element using JavaScript

My plan is to develop a Chrome extension that can automatically fill passwords. The code for this functionality looks like the following: //get the account document.querySelector("input[type=text]").addEventListener('input', () => { ...

Highcharts experiencing difficulty in removing labels

How can I remove labels added to highcharts when a button is clicked, as they still remain visible? For reference, please check out the fiddle: https://jsfiddle.net/7pq3po3o/3/ HTML: <script src="https://code.highcharts.com/highcharts.js"></sc ...

Execute npm commands directly on cPanel

After successfully uploading my script (utilizing Laravel and Vue.js) to CPanel, everything is functioning as expected. However, I now need to make modifications to the Vue.js components. Is there a way to execute npm commands directly on CPanel? npm run d ...

I find it strange how the text automatically becomes highlighted every time I add attributes in React

Recently, I encountered a strange issue while working on my code. The text inside an attribute I was typing suddenly started highlighting without any reason. This not only disrupted my workflow by preventing shortcuts but also became really annoying, esp ...

Acquire a numerical value from a text source and increment it by one using Jquery

I have a simple task of extracting a single number from a particular div. Once obtained, I intend to increment the number by one. However, despite successfully retrieving the number, my attempts to add one to it are not working as expected. For example: ...

Request made to Ajax fetching complete webpage content

I have a page full of random tips at http://www.javaexperience.com/tips To display these tips on other pages of the website, I am using an ajax call to add the content returned by the call to a specific div's HTML. The code for the div is: <div ...

nodejs - pkg encountered an error: only one entry file or directory should be specified

I am currently facing issues with packing my simple cli node script using pkg. After running the command below: host:~ dev$ pkg /Users/dev/Desktop/myscript/ --target node14-macos-x64 node14-linux-x64 node14-win-x64 I encountered an error in the terminal: ...

How can the camera in Three.JS be set up to avoid flipping the model upside down?

Currently, I am working on a 3D building model using Three.JS and Collada loader. My focus right now is on enhancing the interactivity of the system, but I am encountering two main challenges: 1- Whenever I rotate the model within the scene, it rotates on ...

Understanding the Difference Between WARN and ERR in npm Peer Dependency Resolution

I encountered a puzzling situation where two projects faced the same issue, yet npm resolved them differently: https://github.com/Sairyss/domain-driven-hexagon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! W ...

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

Choose information based on the prior choice made

Using the Material UI Stepper, I have a task that involves setting conditions based on the selection of checkboxes. In step one, there are two checkboxes - Individual and Bulk. In step two, there are also two checkboxes - First Screening and Second Screeni ...

Ways to include additional parameters in jQuery ajax success and error callbacks

When working with a jQuery AJAX success/error function similar to the following: success: function (data, textStatus, jqXHR) { } error: function (jqxr, errorCode, errorThrown) { } I am wondering if there is a method where I can pass an array of valu ...

Having trouble extracting data from a particular cell within an HTML table using jQuery

I am struggling to extract row data from a table for utilization in a modal. Provided below is my code for Views. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"> <link href="@Url.Content(" ...

Error Received While Attempting to Log in using Ajax

Having an issue with logging in using ajax and php. I am able to log in successfully, but when trying to display an alert message and refresh the page upon login, it gives me an error without refreshing. However, upon manually refreshing the page, I can se ...

Submit a single data value to two separate models in JSON format using MongoDB

I recently developed a code with 2 essential functions: module.exports.registerAccount = (reqBody) => { let newAccount = new User({ firstName : reqBody.firstName, lastName : reqBody.lastName, email : reqBody.email, mobileNum : reqBody.m ...

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

What is the best method for extracting a value from a JSON file within an array using electron and node.js?

Hey there, I'm currently working with a JSON file that contains an array of value sets. I'm trying to figure out how to extract the first value from the initial set, specifically the value 3 under the key "pink". This is all being done in Node.js ...

Where might I locate the source files for a compass in a Windows operating system?

Is there a way to access certain compass mixins without actually including the entire compass library in my project? I'd prefer not to have to import compass directly, like in these examples: @import "compass"; @import "compass/reset"; @import "co ...