How do I create a dynamic editor form component in 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?

Allan Chain · Accepted Answer · 2020-08-27 23:29:23Z

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

edited Aug 27, 2020 at 23:29

answered Aug 27, 2020 at 22:59

Allan Chain

2,9751 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fredrik Rambris Over a year ago

This looks very nice.

Collectives™ on Stack Overflow

How do I create a dynamic editor form component in Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related