VueEditInPlace

A edit-in-place directive to edit texts and update instance model

Installation

Run npm install vue-editinplace --save

Import into your Vue instance

import Vue from 'vue'
import VueEditInPlace from 'vue-editinplace'

Vue.use(VueEditInPlace)

How to use

VueEditInPlace exposes a directive called v-editinplace, and a custom event @edit, which contains an object with the old value and the new value Examples:

Editing a data variable from an instance

<template>
  <h2 v-editinplace="title">{{ title }}</h2>
</template>
<script>
  export default {
    data () {
      return {
        title: 'Hello World!'
      }
    }
  }
</script>

Get the modified value

<template>
  <div>
    <h2 v-editinplace @edit="edit">{{ title }}</h2>
    <p>new value: {{ newValue }}</p>
    <p>old value: {{ oldValue }}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        title: 'Hello World!',
        newValue: '',
        oldValue: ''
      }
    },
    methods: {
      edit (event) {
        this.newValue = event.detail.newValue
        this.oldValue = event.detail.oldValue
      }
    }
  }
</script>

Tips

Editing a value inside a loop

<template>
  <div>
    <!-- an array of strings -->
    <ul>
      <li 
        v-for="(fruit, index) in fruits" 
        :key="fruit"
        v-editinplace
        @edit="editList($event, index)">
          {{ fruit }}
      </li>
    </ul>
    <!-- an array of objects -->
    <div v-for="(user, index) in users" :key="user.email">
      <h4 v-editinplace @edit="editObject($event, index, 'name')">
        {{ user.name }}
      </h4>
      <h4 v-editinplace @edit="editObject($event, index, 'email')">
        {{ user.email }}
      </h4>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        fruits: ['Apple', 'Banana', 'Grape', 'Coconut', 'Melon'],
        users: [
          {
            name: 'Jorge',
            email: '[email protected]'
          },
          {
            name: 'Caio',
            email: '[email protected]'
          },
          {
            name: 'Bruno',
            email: '[email protected]'
          },
        ]
      }
    },
    methods: {
      editList (event, index) {
        this.fruits[index] = event.detail.newValue
      },
      editObject (event, index, attr) {
        this.users[index][attr] = event.detail.newValue
      }
    }
  }
</script>