CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

v-edit-dialog inside v-data-table restores original value when closed

I have a Vue application that is using Vuetify. For some reason the v-chip component is not re-rendering when the binded value is changed.

<v-data-table>
  <template v-slot:item.active="{ item }">
    <v-edit-dialog :return-value.sync="item.active">
      <v-chip :key="item.active" outlined :color="item.active ? 'success' : 'error'">{{ item.active ? "Open" : "Closed" }}</v-chip>
      <template v-slot:input>
        <v-switch
          @change="saveRowField(item.id, 'active', item.active)"
          v-model="item.active"
          :true-value="1" :false-value="0"
          color="success" label="Open"
          ></v-switch>
      </template>
    </v-edit-dialog>
  </template>
</v-data-table>

The v-switch in the v-edit-dialog correctly updates the binded field item.active. However the v-chip component inside the template does not rerender on state change.

The :key attribute is binded to the same field as the v-switch.

Why is the v-chip not re-rendering when the value binded to the key is changed?

Upvotes: 0

Views: 1458

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37933

Tried your code and re-rendering content of v-chip is not an issue. What I see is chip is changed once I click v-switch but when v-edit-dialog is closed, the original value is restored.

So the problem is in v-edit-dialog. If you put large prop on it, it will display buttons - "Save" and "Cancel". If you use "Save" button, the value is saved. If "Cancel", original value is restored.

Without buttons, only way to close the dialog is clicking "away", which is interpreted as "Cancel" by v-edit-dialog and thus original value is restored...

Possible solutions:

  1. Either let user use "Save"/"Cancel" buttons to confirm/cancel editing
  2. Or remove :return-value.sync="item.active" (responsible for this Save/Cancel behavior).

Demo

Upvotes: 1

Related Questions