Tips for shutting a window

Need help with closing a window upon button click - tried close()

The window opens successfully, but closing it seems to be an issue

I've set the isVisible property to false as needed, but still unable to close it

<template>
      <q-dialog v-model="isVisible" persistent>
        <q-card style="min-width: 350px">
          <q-card-section>
            <div class="text-h6">Add</div>
          </q-card-section>
    
          <q-card-actions align="right" class="text-primary">
            <q-btn outline label="Close" @click="close()" v-close-popup />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </template>
    
    <script>
    
    export default {
    
      name: "ReplyComponent",
    
      props: {
        visible: {  },
      },
    
      data() {
        return {
          isVisible: false
        }
      },
      computed: {
        isVisible: {
            get () { return this.visible },
            set (value) {  },
          },
      },
    
      methods: {
        close(){
            //
        },
      }
    }
    
    </script>

Answer №1

You are unable to change a prop directly, and the computed property's set method is not functioning as expected. You should instead trigger an event to update the visible prop in the parent component :

<template>
      <q-dialog v-model="isVisible" persistent>
        <q-card style="min-width: 350px">
          <q-card-section>
            <div class="text-h6">Add</div>
          </q-card-section>
    
          <q-card-actions align="right" class="text-primary">
            <q-btn outline label="Close" @click="close()" v-close-popup />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </template>
    
    <script>
    
    export default {
    
      name: "ReplyComponent",
    
      props: {
        visible: { type:Boolean, default:false },
      },    
      computed: {
        isVisible: {
            get () { return this.visible },
            set (value) {
                 this.$emit('set-visible',value)
              },
          },
      },
    
      methods: {
        close(){
           this.isVisible = false
        },
      }
    }
    
    </script>

within parent component :

<ReplyComponent @set-visible="(val)=>visible=val" :visible="visible" />

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

Populating an array prior to AJAX transmission

I'm not a JavaScript expert, particularly when it comes to promises and callbacks. However, my goal is to have my JavaScript file perform the following tasks synchronously: 1. Create an array 2. Populate the array with all the necessary elements 3. Se ...

Utilizing material-ui textfield involves a delay when the input is being focused

Is there a way to trigger inputRef.current.focus() without relying on setTimeout? It seems like the focus is not working as expected in React or MaterialUI. For a demonstration, visit: https://codesandbox.io/s/goofy-gareth-lkmq3?file=/src/App.js export de ...

Retrieve the element that was clicked during the show.bs.collapse event in Bootstrap 4's Collapse feature

Looking for a solution to dynamically inject data into a collapsing panel based on the element that triggered it? I need to capture the clicked element when the panel is about to be displayed. Here is the HTML structure: <div class='container&apos ...

Avoid using single quotes in Postgres queries for a more secure Node.js application

Snippet from my node js code: var qry = 'INSERT INTO "sma"."RMD"("UserId","Favourite") VALUES (' + req.body.user + ',' + JSON.stringify(req.body.favourite) + ')' My problem is inserting single quotes before JSON.stringify(r ...

Retrieve an image from the database and associate it with corresponding features or news in PHP

I have retrieved a value from the database, displayed it as an image, and made it a link. So, I want that when a user clicks on the different image, they get the result from the query related to the image. I hope everyone understands. <?php // Connect ...

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

Verify if a certain value is present within a nested array

I need assistance with checking if a specific value is present within a nested array. Here is an example of the data I am dealing with: [ { name: 'alice', occupation: ['Artist', 'Musician'], }, { ...

What might be causing the vuetify buttons to appear colorless?

https://i.sstatic.net/yQsba.png I have created a sign-in card with no colors visible on any of the components. The bottom of the card contains two buttons, but even these lack color visibility. Additionally, the blue color of the text fields is not showi ...

What is the best way to enable the slider within a Bootstrap collapse component?

Utilizing Bootstrap for creating collapsible elements has been my current approach. Additionally, I've integrated a range selector CDN into the mix. It's possible that some styles from the Bootstrap CSS, particularly those related to collapse ele ...

The arrival of chat featuring Ajax, long-polling, and support for multiple users has finally

Imagine a site with three modules: "links", "home", and "chat". The "links" and "home" modules are static pages that do not require long polling. However, in the "chat" module, new messages may arrive at any time from other users, requiring an immediate up ...

Keep the user on the current page even after submitting the parameter

I have a situation where I am loading a page into a specific div. This loaded page contains a link that includes a parameter which directs to another page for deletion. However, when I click on the loaded page within the div, it redirects me to the deletio ...

Firebase and Vue seem to be having trouble staying connected despite persistence settings

I have been working on developing an authentication mechanism using Vue and Firebase. However, I am facing an issue where every time the page is refreshed, the authentication is lost, and I am redirected back to the login page. Following the instructions ...

What is the proper way to utilize the uppercase method while ensuring that Turkish characters are not permitted?

Here is the code snippet I am working with: <input type="text" style="text-transform: uppercase" /> When using this code, characters like ü are transformed to Ü. However, I want ü to be transformed to U, so for example, Gülay should become GULA ...

Angular: Having trouble accessing method within scope

I am attempting to utilize a method from my $scope controller, which is imported from a Factory, and execute it using the onclick method in an Ionic-based HTML. However, I am encountering the issue of getting undefined and I am unsure of the reason behind ...

Transferring the AJAX response into a JavaScript variable

New to AJAX and JS here. I am implementing an AJAX code that fetches data from a php service. I am trying to figure out how to store the returned data in a JavaScript variable, which I can then display on the UI. Below is my AJAX code snippet: <script ...

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

There seems to be an issue with the angular service failing to

I am a beginner in Angular and working on my first web project where I am implementing a service for the first time. However, I am facing a problem: var app = angular.module("mdmapp", ['ui.router']); app.config(function ($stateProvider) { ...

The Facebook Customer Chat Plugin embedded within an iframe

Can the Customer Chat Plugin be used within an iframe? When adding content-security-policy: frame-ancestors IFRAME_DOMAIN, it displays the message Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Se ...

Steps for including a Google Doc hyperlink within a current script

I recently came across a useful template script for creating an automated help desk workflow. Once a user fills out the form, they receive an email with a message saying "Thanks for submitting your issue. \n\nWe'll start working on it as soo ...

I encountered an issue when trying to dynamically add a text field in Angular 2. The error message received was "ERROR TypeError: Cannot read property '0' of

I am currently utilizing Angular2 in my project, and I am attempting to dynamically add a text field. However, I keep encountering an error: Error Message (TS): ngOnInit() { this.myForm = this._fb.group({ myArray: this._fb.array([ ...