为什么从不同组件打开模态时 created() 不能在任何地方工作？

Question

我有一个模态 window 组件，它会在单击任务时打开

<template lang="pug">
.modal-task(:style="{display: showDetailsModal}")
    .modal-task-details
        .task
            | {{task.id}}
            .name(v-show="show")
                |Name: {{task.name}}
            .text(v-show="!show")
                textarea(v-model='task.name')
            .status
                |Status: {{task.status}}
            .text(v-show="!show")
              textarea(v-model='task.status')
            .deadline
                |Deadline: {{task.time}}
            .description(v-show="show")
              |description: {{task.description1}}
            .text(v-show="!show" @change="handleChange")
                textarea(v-model='task.description1')
        button(class='add-task' v-on:click="show=!show" v-show="show") Edit
        button(class='add-task' v-on:click="show=!show" v-show="!show" @click="closeForm()") Close
        button(class='add-task' v-show="showSaveButton" @click="saveTask(task)") Save
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { emitter } from '../main'

export default defineComponent({
  name: 'task-details-modal',
  props: ['showDetailsModal', 'task'],
  data () {
    return {
      show: true,
      showSaveButton: true,
      updatedTask: {
        name: '',
        description1: '',
        time: '',
        status: ''
      }
    }
  },
  methods: {
    closeForm () {
      emitter.emit('close', this.updatedTask)
    },
    saveTask () {
      emitter.emit('save', this.task)
    },
    handleChange () {
      this.showSaveButton = true
    }
  },
  created () {
    this.updatedTask = JSON.parse(JSON.stringify(this.task))
    console.log(this.updatedTask)
  }
})
</script>

而且我可以从这个组件打开它（当我点击这个组件中的任务时，然后从 modalk 创建被触发）

<template lang="pug">
.asd(v-if="Object.keys(this.task).length !== 0" :v-if="showDetailsModal === 'block'")
  task-details-modal(:showDetailsModal = 'showDetailsModal' :task = 'task')
.task(v-for='(task, index) in tasks' :key='task.index'  class="list-item" draggable="true" @dragstart="startDrag($event, task)" @click="openModal(index)")
      .card()
        .name()
          | {{task.name}}
        .deadline
          | {{task.time}}
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { TaskStatusEnum } from './../enums/TaskStatusEnum'
import TaskDetailsModal from '@/components/TaskDetailsModal.vue'
import { emitter } from '../main'

export default defineComponent({
  name: 'tasks-order-by-status',
  props: ['tasks'],
  components: {
    TaskDetailsModal
  },
  data () {
    return {
      TaskStatusEnum,
      showDetailsModal: 'none',
      task: {}
    }
  },
  methods: {
    openModal (index) {
      this.showDetailsModal = 'block'
      this.task = this.tasks[index]
    },
    startDrag (event, item) {
      event.dataTransfer.dropEffect = 'move'
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('itemName', item.name)
      event.dataTransfer.setData('itemStatus', item.status)
    }
  },
  mounted () {
    emitter.on('close', () => {
      this.showDetailsModal = 'none'
    })
    emitter.on('save', () => {
      this.showDetailsModal = 'none'
    })
  }

})
</script>

从这里（当我点击这个组件中的任务时，然后从 modalk 中创建只工作一次，当我点击任何任务时，然后创建不起作用）

<template lang="pug">
.tasks
  .asd(v-if="Object.keys(this.task).length !== 0" :v-if="showDetailsModal === 'block'")
    task-details-modal(:showDetailsModal = 'showDetailsModal' :task = 'task')
  task-modal(:showModal = 'showModal' :tasks = 'tasks'
  @close-modal="showModal = $event")
  h2
      span Tasks
        button(class='add-task' @click="openModal()") +
        .nadesti
          .nades
            span Name
            span Description
          span Deadline
        .task(v-for='(task, index) in tasks' :key='task.index' :ref="`task${index}`" class="list-item" @click="taskModal(index)")
          .name
            | {{task.name}}
          .description
            | {{task.description1}}
          .time
            | {{task.time}}
          button(class='delete-task' @click="deleteCart(index)") -
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { TaskInterface } from '@/types/task.interface'
import useValidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import { emitter } from '../main'
import { TaskStatusEnum } from './../enums/TaskStatusEnum'
import TaskModal from '@/components/TaskModal.vue'
import TaskDetailsModal from '@/components/TaskDetailsModal.vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup () {
    const store = useStore()
    const tasks = computed(() => store.state.tasks)
    return {
      tasks
    }
  },
  components: {
    TaskModal,
    TaskDetailsModal
  },
  data () {
    return {
      v$: useValidate(),
      task_name: '',
      task_deadline: '',
      task_description: '',
      task_status: '',
      TaskStatusEnum,
      showModal: 'none',
      showDetailsModal: 'none',
      task: ''
    }
  },
  methods: {
    taskModal (index) {
      this.task = this.tasks[index]
      this.showDetailsModal = 'block'
    }
  },
  mounted () {
    emitter.on('save', task => {
      const index = task as TaskInterface
      this.tasks[index.id] = task
      this.showDetailsModal = 'none'
    })
    emitter.on('close', task => {
      const index = task as TaskInterface
      this.tasks[index.id].name = index.name
      this.showDetailsModal = 'none'
    })
  }
})
</script>

如何在每次点击任务时创建作品？

Answer 1

之所以是运行s once是因为v-model触发后组件的实例仍然存在

例如，假设我有这些组件：

<MainView>
  <ListComponent />
</MainView>

当我点击某个东西时，会弹出一个新的模态组件。现在是这个样子。

<MainView>
  <ListComponent />
  <ModalComponent />
</MainView>

现在组件已经存在，created 方法将运行。现在我通过将其 v-model 触发为 false 来隐藏模态。该组件从显示中消失，但仍加载该组件。它仍然看起来像这样：

<MainView>
  <ListComponent />
  <ModalComponent />
</MainView>

因为该组件仍然存在并且只是隐藏因为v-model，再次显示它不会再次运行 created。您需要确保该实例已从 DOM 中完全删除，您可以通过组件导入时的 v-if 来完成此操作： <ModalComponent v-if="myCondition" />

我推荐使用VueTools来详细查看这个过程。

为什么从不同组件打开模态时 created() 不能在任何地方工作？

Why does created () not work everywhere when opening modals from different components?

vue.js

vuex