Looking to trigger the closing of a q-popup-proxy by clicking a button from a separate component

I am currently working with a q-popup-proxy component in my project.

<q-btn label="Add Fault" class="addFaultButton" dense @click="openPopUp()">
  <q-popup-proxy position="center" v-if="openFaults">
    <FaultListPicker />
  </q-popup-proxy>
</q-btn>

Here is the setup I have implemented:

    let openFaults = computed(() => store.closeFaultPopup);
    function openPopUp() {
      store.closeFaultPopup = true;
      console.log('st ', store.closeFaultPopup)
    }

Additionally, I have included a cancel button function within the popup component:

    function Cancel() {
      console.log('cancel');
      store.closeFaultPopup = false;
    }

Although it is almost functioning as expected, there is an issue where I have to click the open button twice for the popup to appear. The console log indicates that the value is set to true after the first click. However, the cancel button behaves correctly. Any suggestions on how to resolve this issue would be greatly appreciated. Thank you.

Answer №1

I updated from using v-if to v-model and now everything is functioning correctly

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

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

Error: 'vue' command not found - encountered while creating a vite application

I recently started a new Vue 3 project using Vite, and I wanted to incorporate Vuetify despite it being in alpha stage. Following the tutorials, I tried using "vue add vuetify," but all I received was a "command not found error." What could be going wrong? ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

Why does the React input value keep its value when the modal is re-rendered, despite the state being updated correctly?

Take a look at this sandbox link for the code snippet: Sandbox Showcased below is a table structure: https://i.sstatic.net/3F3Mc.png By clicking on the 'edit' button, a modal window opens up as shown below allowing you to edit input fields (onC ...

Error in template loading

Currently, I am going through the Angular.js tutorial to learn how to incorporate some of its advanced features into my existing applications. Everything has been smooth sailing until I reached the (angular route) section. Unfortunately, I've hit a ro ...

What is the best way to test chained function calls using sinon?

Here is the code I am currently testing: obj.getTimeSent().getTime(); In this snippet, obj.getTimeSent() returns a Date object, followed by calling the getTime() method on that Date. My attempt to stub this functionality looked like this: const timeStu ...

Displaying a certain div when clicked within a loop using Vue.js and Laravel

I am currently facing an issue with displaying a hidden div upon click. The problem arises when using a loop to dynamically generate all the divs. Whenever I click the button, it shows all the divs instead of just one specific div on each click. I attempte ...

Can GET or POST variables be transmitted to external JavaScript?

Is it possible to pass a variable to an external JavaScript file? For instance: Suppose I have the following code: <script type="text/javascript" src="gallery.js"></script> I'm curious to know if it's feasible to pass an argument ...

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

Ensure that the date range picker consistently shows dates in a sequential order

Currently utilizing the vuetify date range picker component https://i.stack.imgur.com/s5s19.png At this moment, it is showcasing https://i.stack.imgur.com/GgTgP.png I am looking to enforce a specific display format, always showing the lesser date first ...

Troubles with Vue components displaying on IE11 in Laravel

I've been facing difficulties rendering all my vue components in IE11. Upon investigation, I discovered that the issue lies in IE's lack of support for ES6 and above. As a solution to this problem, I decided to use babel: This is what my .babel ...

Steer clear of using the onRowClick event if an outputLink is clicked within a RichFaces datatable

What is the best way to prevent the call to onRowClick on a column with an output link in a datatable that targets a new window? <rich:dataTable id="dt" value="#{bean.cars} var="_car"> <a:support event="onRowCli ...

Having a hard time finding the perfect styling solution for Material UI

Is there a way for me to customize the styling of Material UI's components in addition to their default rules by injecting my own CSS? I'm unsure how I would go about setting these parameters using the styled-components API. Is this even doable? ...

The variable "vehicles" being referenced in the rendering process is not defined within the Vue.js instance

New to Vue and php, I recently began following a tutorial on these technologies. While everything seems to be working fine, I encountered an error related to fetching vehicles. After some troubleshooting, it appears that the issue is not with the API call ...

Exploring the function of variables in VueJS

I'm facing a tricky issue with VueJS as I am still getting acquainted with it. My objective is to access and modify variables within the data function, but so far, I haven't been successful. The problematic line: console.log('item: ' ...

Having trouble with Angular NgbModal beforeDismiss feature?

My goal is to add a class to the pop up modal before closing it, and then have it wait for a brief period before actually closing. I've been trying to do this using the beforeDismiss feature in the NgbModalOptions options in Angular Bootstrap's d ...

Encountering an Unresolved Runtime Issue: TypeError arises when attempting to access properties of undefined (specifically 'call') while utilizing the Image component in next.js

I'm currently experimenting with the Image component offered by next.js. This Is My Basic Header Component import Image from 'next/image' import React from 'react' import myImage from '../assets/IMG-20221115-WA0001.jpg' ...

Utilizing JQuery for asynchronous calls with Ajax

I recently started working with ajax calls using jquery and I'm facing an issue while trying to bind values from the Database. The data is returned in a dataset from the Data Access Layer, and I am attempting to bind this dataset to a gridview on my . ...

Display a delete icon when hovering over a Chip component from Material-ui

Recently, I've been exploring ways to implement the on-hover functionality for a chip. What I'm looking for is when I hover over a chip in an array of chips, it should display a delete icon. Below is the code snippet I've been working on: ...

Combing external JavaScript with React functionality

Hey there, I've been working on merging two projects that I came across recently: https://github.com/danxfisher/MeetEasier and this awesome page https://tympanus.net/Development/Interactive3DMallMap/ After making some changes in the MeetEasier React ...