如何在 Vue 中创建动态编辑器表单组件

Question

I am new to Vue.js. I'm creating an app where I use Vuetify and nuxt and want to have a reusable editor modal. So far I figured out that I can use v-dialog. I have a list of pets and I want an editor for that pet to pop up when clicking Edit action link on each row. The editor should load the pet object from backend and present the editor form. When the Save button in the modal is clicked the pet should be saved and parent notified so it can update the list. I want to be able to add pets on another page (say on a Persons page I want to be able to select existing pets and also register a new pet) using the same editor.

Is there a recommended way to construct a component that can be signaled to load pet with given id or open an empty form and also handle saving pets and signaling parent that pet has been updated or created?

Answer 1

Why not use props for input signal and emit event for output signal?

In the below example, editor component is reactive to petId and you can close dialog by setting petId to null

In EditorDialog.vue :

<template>
  <v-dialog :value="petId !== null">
    <!-- You editor -->
    <v-button @click="onSave">Save</v-button>
  </v-dialog>
</template>

<script>
export default {
  props: {
    petId: {
      type: String,
      default: '' // '' means create new pet
    }
  },
  watch: {
    petId: {
      immediate: true,
      handler(petId) {
        if (petId === null) return
        // fetch data or create empty data
      }
    }
  }
  methods: {
    onSave(): {
      const data = xx // your logic here
      this.$emit('save', data)
    }
  }
}
</script>

And in the parent:

<EditorDialog pet-id="blah" @save="handler" />

You can set pet-id initial to null and the dialog will not be rendered as open on server side. Also, you can remove immediate: true if initial value is always null