typescript 当我使用v-model时，Vue 3模态总是打开的

xytpbqjk 于 2023-04-07 发布在 TypeScript

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

我想使用'v-model'实现常见的模态函数。我的代码如下所示：实际上，该功能确实工作（它显示警报消息），但对话框有'v-model'弹出continuosly即使他们是'假'.请帮助我.. T_T

<template>
      <v-dialog  v-model="modals.add_directory">
         test dialog
      </v-dialog>
</template>

<script lang="ts" setup>

const modals = {
          add_directory: ref(false),
          add_lvm: ref(false),
          add_lvmthin: ref(false),
          add_nfs: ref(false),
          add_smbcifs: ref(false),
          add_cephfs: ref(false),
          add_rbd: ref(false),
          add_zfs: ref(false),
};

const open_modal = (modalName) => {
    alert(modals[modalName].value);
    modals[modalName].value = !modals[modalName].value;
};

</script>

typescript

来源：https://stackoverflow.com/questions/75915424/vue-3-modal-is-always-open-when-i-use-v-model

1条答案

按热度按时间

eagi6jfj1#

是的，这是Vue的一个有点令人恼火的行为，当模板中的引用来自数组或对象时，它们不会被解包（参考this bug）。你必须自己解包，即写modals.add_directory.value：

<v-dialog  v-model="modals.add_directory.value">
  ...
</v-dialog>

你可以在代码片段中看到它的工作方式：

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const modals = {
      addDirectory: ref(false),
    };
    
    const openModal = (modalName) => {
      modals[modalName].value = !modals[modalName].value;
    };

    return { openModal, modals }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
    
      <v-dialog v-model="modals.addDirectory.value">
        <v-card>
          <v-card-title>
            The add directory dialog 
          </v-card-title>
        </v-card>
      </v-dialog>

      <v-btn @click="openModal('addDirectory')" class="ma-4">
        add directory
      </v-btn>

    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.js"></script>

或者，您可以使用reactive，它没有此限制：

const modals = reactive({
      addDirectory: false,
    });
    
    const openModal = (modalName) => {
      modals[modalName] = !modals[modalName];
    };

const { createApp, reactive } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const modals = reactive({
      addDirectory: false,
    });
    
    const openModal = (modalName) => {
      modals[modalName] = !modals[modalName];
    };

    return { openModal, modals }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
    
      <v-dialog v-model="modals.addDirectory">
        <v-card>
          <v-card-title>
            The add directory dialog 
          </v-card-title>
        </v-card>
      </v-dialog>

      <v-btn @click="openModal('addDirectory')" class="ma-4">
        add directory
      </v-btn>

    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.js"></script>

这样行吗

赞(0）回复(0）举报 2023-04-07

我来回答

typescript 当我使用v-model时，Vue 3模态总是打开的

1条答案

相关问题

热门标签

最新问答