vue.js 如何关闭窗口

0qx6xfy6 于 2022-11-17 发布在 Vue.js

关注(0)|答案(1)|浏览(274)

如何在单击按钮时关闭窗口close（）
在此代码中，窗口成功打开，但无法关闭
我知道setisVisible属性必须设置为false，但即使设置了它，它也无法关闭

<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>

vue.js

来源：https://stackoverflow.com/questions/74272330/how-to-close-a-window

1条答案

按热度按时间

ntjbwcob1#

您不能改变prop，并且computed属性的set方法不执行任何操作，此时您应该发出一个事件来更新父组件中的可见prop：

<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>

在父项中：

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

赞(0）回复(0）举报 2022-11-17

我来回答

vue.js 如何关闭窗口

1条答案

相关问题

热门标签

最新问答