HelpBot Assistant

How can I help you?

Getting Started with the Vue In-Place Editor Component in Vue 2

10 Feb 202620 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion^® Vue In-Place Editor component.

To get started quickly with the Vue In-Place Editor, check this video:

Prerequisites

System requirements for Syncfusion^® Vue UI components

Setup the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion^® components to the project.

Add Syncfusion^® Vue packages

Syncfusion^® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue In-Place Editor component as an example. Install the @syncfusion/ej2-vue-inplace-editor package by running the following command:

npm install @syncfusion/ej2-vue-inplace-editor --save

yarn add @syncfusion/ej2-vue-inplace-editor

Import Syncfusion^® CSS styles

Syncfusion^® components require CSS stylesheets to display correctly. You can import themes in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG, and Theme Studio. Refer to themes topic to learn more about built-in themes and different ways to reference themes in a Vue project.

In this article, the Material3 theme is applied using CSS styles, which are available in installed packages. The necessary Material3 CSS styles for the In-Place Editor component and its dependents were imported into the <style> section of the src/App.vue file.

~/src/App.vue
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>

The order of CSS imports matters. Import base styles first, then component-specific styles. Missing CSS imports can result in misaligned layouts, buttons without styling, or missing visual elements in popups and dialogs.

Add Syncfusion^® Vue component

Follow these steps to add the Vue In-Place Editor component:

1. First, import and register the Inplace editor component in the script section of the src/App.vue file.

~/src/App.vue
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  }
}
</script>

2. In the template section, define the Inplace editor component with the model property.

~/src/App.vue
<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Text" value="Andrew" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

3. Declare the value for the model property in the script section.

~/src/App.vue
<script>
data () {
    return {
      model: {
          placeholder: 'Enter employee name'
      },
    }
  }
</script>

Add the In-Place Editor with TextBox

By default, the TextBox component is rendered in the In-Place Editor with the type property set as Text.

<template>
    <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Text" value="Andrew" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  name: 'app',
  data: function(){
    return {
      model: {
          placeholder: 'Enter employee name'
      },
    }
  }
}
</script>

Configure DropDownList

You can render a DropDownList by changing the type property to DropDownList and configure its properties and methods using the model property.

In the following sample, the type property and model values are configured to render the DropDownList component. The genderData property specifies the data source for the dropdown list.

<template>
  <div id="app">
    <ejs-inplaceeditor id="element" type="DropDownList" mode= "Inline" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  name: 'app',
  data () {
    return {
      model: {
           genderData: ['Male', 'Female'],
           placeholder: 'Select gender'
      },
    }
  }
}
</script>

Integrate DatePicker

You can render a DatePicker by changing the type property to Date and configuring its properties and methods using the model property.

In the following sample, the type property and model values are configured to render the DatePicker component.

<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Date" :model="model" :value="value">
    </ejs-inplaceeditor>
  </div>
</template>

<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  name: 'app',
  data () {
    return {
      value: new Date('04/12/2018'),
      model: {
            showTodayButton: true
      },
    }
  }
}
</script>

Here is the summarized code for the above steps in the src/App.vue file:

~/src/App.vue
<template>
  <div id="app">
    <div class="control-group">
      <h3> Modify Basic Details </h3>
      <table>
        <tr>
          <td>Name</td>
          <td class='left'>
            <ejs-inplaceeditor id="element" type="Text" mode="Inline" value="Andrew"
              :model="textModel"></ejs-inplaceeditor>
          </td>
        </tr>
        <tr>
          <td>Date of Birth</td>
          <td class='left'>
            <ejs-inplaceeditor id="dateofbirth" type="Date" mode="Inline" :value="dateValue"
              :model="dateModel"></ejs-inplaceeditor>
          </td>
        </tr>
        <tr>
          <td>Gender</td>
          <td class='left'>
            <ejs-inplaceeditor id="gender" type="DropDownList" mode="Inline" value="Male"
              :model="dropdownModel"></ejs-inplaceeditor>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  name: "App",
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  data() {
    return {
      dateValue: new Date('04/12/2018'),
      dateModel: {
        showTodayButton: true,
        placeholder: 'Select date of birth'
      },
      textModel: {
        placeholder: 'Enter your name'
      },
      dropdownModel: {
        dataSource: ['Male', 'Female'],
        placeholder: 'Select gender'
      },
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>

<style>
#app {
  visibility: hidden;
}

#app .control-group {
  text-align: center;
  margin-top: 50px;
}

#app .control-group table {
  width: 400px;
  margin: auto;
}

#app .control-group table td {
  height: 70px;
  width: 150px;
}

#app .control-group table td.left {
  text-align: left;
}
</style>

Run the project

To run the project, use the following command:

npm run serve

yarn run serve

Two-way binding

In the In-Place Editor, two-way binding support is achieved using the v-model directive in Vue. When you change a value in the first In-Place Editor component, the changed value updates automatically to the second In-Place Editor. The following example demonstrates how to achieve two-way binding in the In-Place Editor.

~/src/App.vue
<template>
  <div id="app">
    <div id='container'>
      <div class="control-group">
        <table>
          <tr>
            <td><b>TextBox :</b></td>
            <ejs-inplaceeditor id="textbox" type="Text" mode="Inline" :model="textModel" v-model="value">
            </ejs-inplaceeditor>

            <ejs-inplaceeditor id="textbox2" type="Text" mode="Inline" :model="textModel" v-model="value">
            </ejs-inplaceeditor>
          </tr>
          <tr>
            <td><b>Datepicker :</b></td>
            <ejs-inplaceeditor id="dateeditor1" mode="Inline" type="Date" :model="dateModel" v-model="datePickerValue">
            </ejs-inplaceeditor>

            <ejs-inplaceeditor id="dateeditor2" mode="Inline" type="Date" :model="dateModel" v-model="datePickerValue">
            </ejs-inplaceeditor>
          </tr>
          <tr>
            <td><b>DropDownList :</b></td>
            <ejs-inplaceeditor id="dropDowneditor1" mode="Inline" type="DropDownList" :model="dropdownModel"
              v-model="dropdownValue">
            </ejs-inplaceeditor>

            <ejs-inplaceeditor id="dropDowneditor2" mode="Inline" type="DropDownList" :model="dropdownModel"
              v-model="dropdownValue">
            </ejs-inplaceeditor>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  name: "App",
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  data() {
    let frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript',
      'Angular', 'React', 'Vue', 'Ionic'];
    return {
      value: 'Andrew',
      dropdownValue: 'Android',
      datePickerValue: new Date('11/23/2018'),
      textModel: {
        placeholder: 'Enter employee name'
      },
      dropdownModel: {
        placeholder: 'Select frameWorks',
        dataSource: frameWorkList
      },
      dateModel: {
        placeholder: 'Select date'
      }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>

<style>
#app {
  visibility: hidden;
}

#app .control-group {
  text-align: center;
  margin-top: 50px;
}

#app .control-group table {
  width: 400px;
  margin: auto;
}

#app .control-group table td {
  height: 70px;
  width: 150px;
}

#app .control-group table td.left {
  text-align: left;
}
</style>

Submitting data to the server (save)

You can submit editor value to server by configuring the url, adaptor, and primaryKey property.

Property	Usage
`url`	Gets the url for server submit action.
`adaptor`	Specifies the adaptor type that is used by DataManager to communicate with DataSource.
`primaryKey`	Defines the unique primary key of editable field which can be used for saving data in the data-base.

The primaryKey property is mandatory. If it’s not set, edited data are not sent to the server.

Refresh with modified value

The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.

~/src/App.vue
<template>
  <div id="app">
    <div class="container">
      <div class="control-group" style="text-align:center;margin: 100px auto">
        Best Employee of the year: <ejs-inplaceeditor id="element" type="DropDownList" mode="Inline"
          value="Andrew Fuller" name="Employee" :url="serviceUrl" primaryKey="Employee" adaptor="UrlAdaptor"
          :model="dropdownModel" :actionSuccess="actionSuccess" :created='created'></ejs-inplaceeditor>
      </div>
      <table style="margin:auto;width:50%">
        <tr>
          <td style="text-align: left">
            Old Value :
          </td>
          <td id="oldValue" ref="oldValue" style="text-align: left">

          </td>
        </tr>
        <tr>
          <td style="text-align: left">
            New Value :
          </td>
          <td id="newValue" ref="newValue" style="text-align: left">
            Andrew Fuller
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-vue-inplace-editor';

export default {
  name: "App",
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  data() {
    return {
      serviceUrl: "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData",
      dropdownModel: {
        dataSource: ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'],
        popupHeight: '200px',
        placeholder: 'Select employee'
      },
    }
  },
  methods: {
    actionSuccess: function (e) {
      this.$refs.oldValue.textContent = this.$refs.newValue.textContent;
      this.$refs.newValue.textContent = e.value;
    }
  },
  provide: {
    "inplaceeditor": [MultiSelect]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>

<style>
.e-inplaceeditor {
  min-width: 200px;
  text-align: left
}
</style>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting Started with the Vue In-Place Editor Component in Vue 2

Prerequisites

Setup the Vue 2 project

Add Syncfusion^® Vue packages

Import Syncfusion^® CSS styles

Add Syncfusion^® Vue component

Add the In-Place Editor with TextBox

Configure DropDownList

Integrate DatePicker

Run the project

Two-way binding

Submitting data to the server (save)

Refresh with modified value

See Also

How can I help you?

Getting Started with the Vue In-Place Editor Component in Vue 2

Prerequisites

Setup the Vue 2 project

Add Syncfusion® Vue packages

Import Syncfusion® CSS styles

Add Syncfusion® Vue component

Add the In-Place Editor with TextBox

Configure DropDownList

Integrate DatePicker

Run the project

Two-way binding

Submitting data to the server (save)

Refresh with modified value

See Also

Add Syncfusion^® Vue packages

Import Syncfusion^® CSS styles

Add Syncfusion^® Vue component