Skip to content

🎁 Adds the `FeathersVuexInputWrapper`

Compare
Choose a tag to compare
@marshallswain marshallswain released this 31 Jan 21:26
· 425 commits to master since this release

This release adds the new, renderless FeathersVuexInputWrapper component which makes quick work of "edit-in-place" inputs:

<template>
  <div class="p-3">
    <FeathersVuexInputWrapper :item="user" prop="email">
      <template #default="{ current, prop, createClone, handler }">
        <input v-model="current[prop]" type="text" @focus="createClone" @blur="e => handler(e, save)" />
      </template>
    </FeathersVuexInputWrapper>

    <!-- Simple readout to show that it's working. -->
    <pre class="bg-black text-white text-xs mt-2 p-1">{{user}}</pre>
  </div>
</template>

<script>
export default {
  name: 'InputWrapperExample',
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  methods: {
    // Optionally make the event handler async.
    async save({ event, clone, prop, data }) {
      const user = clone.commit()
      return user.patch(data)
    }
  }
}
</script>