How to close a window when a button is clicked close()

In this code, the window opens successfully, but it cannot be closed

I understand that the set isVisible property must be set to false, but even when I set it, it cannot be closed

<template>
      <q-dialog v-model="isVisible" persistent>
        <q-card style="min-width: 350px">
          <q-card-section>
            <div >Add</div>
          </q-card-section>
    
          <q-card-actions align="right" >
            <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>

CodePudding user response：

You cannot mutate a prop, and the set method of your computed property doesn't do anything, where you should emit 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 >Add</div>
          </q-card-section>
    
          <q-card-actions align="right" >
            <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>

in parent :

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