试图找出为什么当我添加模态时我的 v-show 停止工作

Question

我第一次尝试学习 Vue，我正在构建一个应用程序，其中有一个包含数据行的部分。每一行都将与该元素的大量数据相关联，为了避免一次加载所有这些数据，我之前使用 v-show 属性实现了一种“可扩展行”。这非常有效，按下按钮时，信息行将展开，并且将调用我的数据库来检索有关该特定行的额外信息。

这一直有效，直到我尝试添加打开模式的按钮来编辑与该行关联的信息或确认删除该行。我正在遵循 Vue 示例页面上有关如何制作模式来开始的示例（此示例）。

为了更好地解释这一点，我的组件具有以下结构：

行.vue

-> RowContent.vue

-> -> 删除Modal.vue

-> -> EditModal.vue

行：每行始终可见的信息，包括展开行以使 RowContent 可见的按钮

RowContent：在 Row.vue 中按下按钮后将可见的信息，并将包含使 DeleteModal.vue 和 EditModal.vue 可见的按钮。

DeleteModal.vue：将出现询问用户是否确定要删除该行的模式

EditModal.vue：将出现的模式，以便用户可以编辑行中的信息

这是我的 RowContent.vue 和 Row.vue 代码：

行.vue：

<script setup>
const isOpen=ref(false);
function expand(npc) {
        isOpen.value = !isOpen.value
        npcName.value = ref(npc.get('Name'));
        if(isOpen.value){
           getClass(npc);
           getType(npc);
           getRace(npc);
        }
    }
</script>
<template>
    <div class="RowBackground">
        <div class="alwaysShown">
            <h1>{{ npc.get('Name') }}</h1>
            <button @click="expand(npc)">Expand</button>
        </div>
        <RowContent class='drawer' :npcName='npcName' :npcClass='npcClass' :npcType='npcType' :race='race' :extra='extra' v-show='isOpen'></RowContent>
    </div>
</template>

<script>
import RowContent from './RowContent.vue';
export default {
    props: {
        npc: Object,
    },
    components: {
        RowContent,
    },
</script>

行内容：

<script setup>
import  DeleteModal from '../components/DeleteModal.vue';
import { ref } from 'vue';
const showModal= ref(false);
</script>

<template>
    <div class="rowContainer">
        <div class="row">
            <h3>Class: {{ npcClass }}</h3>
            <h3>Type: {{ npcType }}</h3>
        </div>
        <div class="row">
            <h3>Race: {{ race }}</h3>
            <h3>Extra: {{ extra }}</h3>
        </div>
        <div class="row">
            <button class="editButton">Edit</button>
            <button class="deleteButton" @click="showModal=true">Delete</button>
        </div>
        
    </div>
     
    <DeleteModal :npcName="npcName" :show="showModal" @close="showModal = false">
    </DeleteModal>
   
</template>

删除模态：

<script setup>
const props = defineProps({
  show: Boolean,
});
</script>

<template>
  
    <div v-if="show" class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
            <h3 class="deleteText">Delete {{ npcName }} permanently?</h3>
        </div>

        <div class="modal-body">
          <div class="interactionButtons">
            <button>Confirm</button>
            <button @click="$emit('close')">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  
</template>
<script>
export default {
    props: {
        npcName: {
            type: String
        }
    },
    data() {
        return {
            isOpen: false,
        };
    },
}
</script>

我遗漏了一些连接到我的后端的样式和功能，因为我认为它们不适用。请发表评论并让我知道这些是否有助于诊断问题。

Answer 1

由于您已经定义了模态并在

RowContent

组件中使用了相同的模态，因此您只需在模板的根节点内使用该组件即可

RowContent.vue 组件

<template>
    <div class="rowContainer">
        <div class="row">
            <h3>Class: {{ npcClass }}</h3>
            <h3>Type: {{ npcType }}</h3>
        </div>
        <div class="row">
            <h3>Race: {{ race }}</h3>
            <h3>Extra: {{ extra }}</h3>
        </div>
        <div class="row">
            <button class="editButton">Edit</button>
            <button class="deleteButton" @click="showModal=true">Delete</button>
        </div>
     
      <DeleteModal :npcName="npcName" :show="showModal" @close="showModal = false">
      </DeleteModal>
   </div>
</template>