Does v-if cause the jquery clock picker to malfunction?

Here is my unique div where the clockpicker library functions correctly.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="18:00">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
</div>

However, when I added a v-if to the div like this:

<div class="input-group clockpicker"  v-if="overtimeType==3">

The clock picker no longer displays when clicking on the input field. There are no errors in the console. Any thoughts on why this might be happening?

PS: Using v-show instead works perfectly fine.

javascriptvue.js

Answer №1

When the condition in v-if results in being false, it will eliminate elements from the DOM. This can lead to one of two scenarios:

  • If v-if removes a div with the clockpicker class before the $('.clockpicker').clockpicker() function is called, there will be no element available to apply .clockpicker() on.
  • In case v-if eliminates the element after it has been worked on by .clockpicker(), the clockpicker library monitors its root element to detach itself upon detecting dom removal events.

The use of v-show ensures proper functionality as this directive toggles the CSS display property rather than completely taking the element out of the DOM.

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

Find the time matching in a time string using Javascript

I need to extract the time in the format "HH:MM:SS" from a string like "HH:MM:SS CEST". How can I achieve this without including any additional strings such as CEST? ...

javascriptregextimematch

Error: The lambda response was not defined. Please review your function code. The response returned with a status of 500 in 583 milliseconds

https://i.sstatic.net/GUHr9.png I'm experimenting with Netlify and its Lambda function feature to execute a Node.js function. Following the guide at https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/. ...

javascriptnode.jslambdanetlify

Having trouble accessing portlet resource URL from JavaScript in Liferay 6.2

I have been working with Liferay Portal 6.2 CE GA3 and I am facing an issue where I need to execute a custom portlet resource method from another portlet's JSP file. Below is the code snippet I am currently using. <a href ="#" onclick="myfunctio ...

javascriptajaxliferay-6liferay-aui

Ways to invoke a JavaScript function using a JSON string

Suppose I make an AJAX post request using jQuery with the following structure: $.post('MyApp/GetPostResult.json', function(data) { // what should be implemented here? }); When the result is as follows: { "HasCallback": true, "Cal ...

javascriptjqueryajaxxmlhttprequesthttp-post

What is the best way to secure videos and other static files with authentication in a next.js web application?

My goal is to provide static content, specifically videos, exclusively to authorized visitors. I want to secure routes so that they are only accessible to authenticated users. However, the challenge arises when trying to display a video on a page located i ...

javascriptnode.jsreactjsauthenticationnext.js

Using Jquery toggleClass on a specific icon without impacting the other icons that share the same class

I am currently working on a project where I have multiple divs that each contain an SVG as a background image, specifically for audio player buttons. My goal is to toggle the class of the clicked element without affecting the others. However, I am struggli ...

javascriptjquery

Click on the button to automatically scroll to a specific component inside the dialog

In my JSF/Primefaces application, I have a page with a long content that can be scrolled, along with a dialog also containing lengthy content that requires scrolling. The dialog includes a button and I am looking to scroll the dialog content to a specific ...

javascriptjqueryjsfjakarta-eeprimefaces

Plupload is not compatible with ng-dialog

I'm currently attempting to integrate plupload into a modal window that is generated by ng-dialog. Here is the code I am using: $scope.showManager = function(){ ngDialog.open({ template: '/template/fmanager.html', controller: &apo ...

javascriptangularjspluploadng-dialog

Accordion content in motion

After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header. Even though I included height: auto and transition in the accordion container, it did not seem to have any impa ...

javascripthtmlcss

Implementation of OAuth 2 Authorization Code Grant

I currently have the following setup: Resource Server: A basic RESTful API coded in PHP (using Slim and Doctrine) Auth Server: My custom implementation of an OAuth 2 server in PHP (utilizing Slim and Doctrine) Public Client: A Single Page Application (S ...

phpvue.jsauthenticationoauth-2.0authorization

Preventing the copying and pasting of HTML ruby tags

I am currently using ruby tags to include pinyin in my text. For instance: <p> <ruby>与<rt>yǔ</rt></ruby><ruby>摩<rt>mó</rt></ruby><ruby>拜<rt>bài</rt></ruby><ruby& ...

javascripthtmlcss

Update an existing JSON document

Looking for a solution to update the json file while retaining specific strings and values? const fs = require('fs'); var logPath = 'log.json' var logRead = fs.readFileSync(logPath) var logFile = JSON.parse(logRead) LogChannel = &apo ...

javascriptnode.jsjson

The router is displaying the component directly on the current page rather than opening it on a separate page

The issue is that the router is rendering the page on the same page instead of generating a new one. When clicking on the Polls link, it only renders the page there but the URL changes in the browser. Polls.js import React from 'react'; import ...

javascriptreactjsreact-router

Use jQuery to easily update the background of an iFrame

I have implemented this code to store the background image selected from a dropdown menu labeled rds. This function also sets a cookie so that the chosen background persists even after the page is reloaded. The issue lies in the line containing $('da ...

javascriptjqueryhtml

What is the best way to organize and structure a node.js project for modularity?

In the process of developing a node.js project, I am adhering to the class constructor pattern as shown below: function my_class(x,y){ this.x = x; this.y = y; } The foundation of the project lies within the main.js file. It is imperative that any ...

javascriptnode.jsrequiremodularity

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

Imagine a scenario where a user is filling out a multi-step form, and we want to ensure that their progress is saved in case they lose connection. This way, the user's data will not be lost between different form steps. In addition to saving each ste ...

javascriptphplaravelvue.jscookies

Exploring the Power of Namespaces in ECMAScript 6 Classes

My goal is to create a class within the namespace TEST using ECMAScript 6. Previously, I achieved this in "old" JavaScript with: var TEST=TEST || {}; TEST.Test1 = function() { } Now, I am attempting the following approach: var TEST=TEST || {}; class TES ...

javascriptclassnamespacesecmascript-6

Is it possible to extract data from a JavaScript Array using scraping techniques?

I have a sample page that I want to extract data from... [ [4056, 1, 'Saturday, Aug 18 2012', '15:00', 171], [4057, 1, 'Saturday, Aug 18 2012', '15:00', 94], [4058, 1, 'Saturday, Aug 18 2012', '15:00& ...

phpjavascriptjsonfile-get-contents

Why is it difficult to display data fetched through getJSON?

The test-json.php script retrieves data from the database and converts it into JSON format. <?php $conn = new mysqli("localhost", "root", "xxxx", "guestbook"); $result=$conn->query("select * From lyb limit 2"); echo '['; $i=0; while($row ...

javascriptjsonajaxgetjson

Tips for concealing XHR Requests within a react-based single page application

Is there a way to hide the endpoint visible in Chrome's devtools under the network tab when data is fetched in React? Can server-side rendering solve this issue? ...

javascriptreactjsnext.jsserver-side-renderingclient-side