Popup Edit     

QPopupEdit is a component that can be used to edit a value “in place”, like for example a cell in a QTable. By default, a cell is displayed as a String, then if you are using QPopupEdit and user clicks/taps on the table cell, a popup will open where user will be able to edit the value using a textfield.

This component injects a QPopover into its parent DOM element and enables the behavior described above, so it can be used anywhere, not only in QTable.

Installation

Quasar v0.17.10+

Edit /quasar.conf.js:

framework: {
  components: ['QPopupEdit']
}

Basic Usage

Below is an example with a QTable. Please note that we are using the “body” scoped slot. QPopupEdit won’t work with cell scoped slots.

<q-table
  :data="data"
  :columns="columns"
  :filter="filter"
  :title="title"
  row-key="name"
>
  <q-tr slot="body" slot-scope="props" :props="props">
    <q-td key="desc" :props="props">
      {{ props.row.name }}
      <q-popup-edit v-model="props.row.name">
        <q-field count>
          <q-input v-model="props.row.name" />
        </q-field>
      </q-popup-edit>
    </q-td>
    <q-td key="calories" :props="props">
      {{ props.row.calories }}
      <q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
        <q-input type="number" v-model="props.row.calories" />
      </q-popup-edit>
    </q-td>
    <q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
    <q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
    <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
    <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
    <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
    <q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
  </q-tr>
</q-table>

Vue Properties

Supports v-model which should be bound to a String or Number (depending on type property used) in your scope.

Vue PropertyTypeDescription
titleString(Optional) Title to display
buttonsBoolean(Optional) Show Set & Cancel buttons
label-setStringOverride label for “Set” button
label-cancelStringOverride label for “Cancel” button
colorStringOne from Quasar Color Palette to apply for inner input and buttons
validate(val)FunctionFunction to determine if input is correct, and in such case the value is saved, otherwise the edit is cancelled
persistentBooleanDo not close popup if clicking outside of it
disableBooleanDisable popup

Vue Events

Vue MethodDescription
@showTriggered after opening popup.
@hideTriggered after closing popup.
@save(val, initialValue)Edit is successful and the value gets saved
@cancel(val, initialValue)Edit has been cancelled and the value gets reverted to its original form
Tooltip Ajax Bar
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub