CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Javier Cárdenas
Javier Cárdenas

Reputation: 4045

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

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

enter image description here

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".

enter image description here

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

Upvotes: 5

Views: 3062

Answers (1)

Traxo
Traxo

Reputation: 19022

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.

Upvotes: 3

Related Questions