Convert strings to numbers with <v-edit-dialog> component in Vuetify

Question

I have a Vuetify Datatable with inline editing using <v-edit-dialog> components.

The Calories column values are numbers, but when I edit them, they are converted to strings by default and I want them to stay as numbers. For example If I change Frozen Yogurt Calories from 159 to 30, the value becomes the string "30".

Code Snippet

<td>
    <v-edit-dialog
        :return-value.sync="props.item.calories"
        lazy
        @save="save"
    > {{ props.item.calories }}
        <v-text-field
        type="number"
        slot="input"
        v-model.number="props.item.calories"
        label="Edit"
        single-line
        ></v-text-field>
    </v-edit-dialog>
</td>

I thought that using v-model.number and the type=number would solve the problem, but it's still happening.

This is a pen where you can reproduce my issue:

https://codepen.io/jdash99/pen/dQJVwx?editors=1010

I'm confused. When I edit them, they're still being saved as numbers? Was this fixed already? — SnakeyHips
@Traxo it's part of the example in the vuetify docs. I don't really know what it does... data table docs — Javier Cárdenas
Does it work for you if you remove .sync modifier? Any side effects? — Traxo

Traxo Traxo · Accepted Answer · 2018-11-21T13:24:26

v-model.number changes it to number correctly, but something else changes it back to string, probably .sync modifier.
Remove .sync modifier from :return-value.sync and it should work.

Convert strings to numbers with <v-edit-dialog> component in Vuetify

1 Answers