Vue发送数据到modal

disho6za 于 2023-05-23 发布在 Vue.js

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

我有三个组成部分：TaskList、TaskItem和TaskForm。
TaskList包含一个循环来呈现TaskItem中的所有数据。每个TaskItem都有一个编辑按钮，我想打开一个TaskForm（使用引导模式）与任务数据。
TaskForm.vue

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="formModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ props.task.name }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>
    </div>
  </div>

TaskList.vue

<div class="container">
    <TaskItem
      v-for="task in props.tasks"
      :key="task.uuid"
      :task="task"
    />
  </div>

TaskItem.vue

<div class="row align-items-center p-2 border rounded mt-2">
    <div class="col-3">
    {{ props.task.name }}
    </div>
      <button class="btn btn-primary" @click="showForm = !showForm" data-bs-toggle="modal" data-bs-target="#formModal">
        <i class="bi bi-pencil-square"></i>
      </button>
  </div>

  <TaskForm v-if="showForm" :task="props.task"/>

但是当我这样做时，在每个模态中，我得到的是第一个任务名，而不是选中的那个。
我不认为这是最好的方式来完成我想做的事情（编辑一个列表项），但这是我想出来的。如果有人有更好的建议，我很乐意阅读。

vue.js

来源：https://stackoverflow.com/questions/76294614/vue-send-data-to-modal

1条答案

按热度按时间

vuktfyat1#

我建议只使用TaskForm组件一次，这可以通过使用props和emits来实现，如下所示

// for parent component
<template>
<ChildComponent v-for="item in items" key={item.id} :item="item" @edit-item="showEditModal" />
<PopUpComponent v-if="selectedItem !== null" :selected-item="selectedItem" @close="selectedItem = null" />
</template>
<script setup>
import {ref} from "vue";
const selectedItem = ref(null);
function showEditModal(item) {
selectedItem.value = item;
}

</script>

对于子组件，我们需要定义一个名为edit-item的emit来调用这个函数

// for child
<template>
..other data
<button @click="editItem">edit</button>
</template>
<script setup>
const emit = defineEmits(["edit-item"]);

function editItem() {
emit('edit-item', props.item) // this will call the @edit-item in parent and that function will set a selectedItem non-null value which will render the modal
}
</script>

类似地，对于模式中的关闭函数

<template>
...
<button @click="closeModal">close</button>
</template>
<script setup>
const emit = defineEmits(["close"])
function closeModal() {
emit("close")
}
</script>

赞(0）回复(0）举报 2023-05-23

我来回答

Vue发送数据到modal

1条答案

相关问题

热门标签

最新问答