BootstrapVue Show Form in Modal

April 9, 2020

Create Form Component with Validation (using vuelidate)

Edit components/PlaceForm.vue

<template>
  <div>
    <b-form ref="form" @submit.prevent="submit">
      <b-form-group
        label="Name"
        label-for="input-name"
        invalid-feedback="Name is required"
      >
        <b-form-input
          :state="validateState($v.item.name)"
          id="input-name"
          v-model="$v.item.name.$model"
        ></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
import { validationMixin } from "vuelidate"
import { required, minLength } from "vuelidate/lib/validators"

export default {
  mixins: [validationMixin],
  props: ['item'],
  /*
  data() {
    item: {
      name: 'Desmond'
    },
  },
   */
  validations: {
    item: {
      name: {
        required
      },
    }
  },
  methods: {
    validateState(item) {
      const { $dirty, $error } = item
      return $dirty ? !$error : null
    },
    submit() {
      this.$v.item.$touch()
      if (this.$v.item.$anyError)
        return false

      return this.item
    }
  }
}
</script>

Usage: a table of items, each row have an edit button to show edit form as modal

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields">
      <template v-slot:cell(action)="data">
        <b-button size="sm" variant="outline-primary" @click="showEditPlaceModel(data.index, data.item)">Edit</b-button>>
      </template>
    </b-table>

    <b-modal ref="editPlaceModal" title="Edit Place" @ok.prevent="submitEditPlace">
      <place-form ref="editPlaceForm" :item="editPlace" />
    </b-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import PlaceForm from '~/components/PlaceForm.vue'

export default {
  data() {
    return {
      fields: ['name', 'action'],
      items: [
        { name: 'New York' },
        { name: 'Tokyo' },
        { name: 'Kuala Lumpur' }
      ],
      editPlace: null,
      editIndex: null
    }
  },
  methods: {
    showEditPlaceModel(index, data) {
      // deep clone
      editPlace = JSON.parse(JSON.stringify(data))
      // shallow clone
      // this.editPlace = Object.assign({}, data)
      this.editIndex = index

      this.$refs.editPlaceModal.show()
    },
    submitEditPlace() {
      const data = this.$refs.editPlaceForm.submit()
      if (data) {
        // do something: save data?

        // reactive caveats
        // this.items[this.editIndex] = newData
        Vue.set(this.items, this.editIndex, data)
        this.$nextTick(() => {
          this.$refs.editPlaceModal.hide()
        })
      }
    }
  },
  components: { PlaceForm }
}
</script>

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags: