在Vuetify中使用<v-edit-dialog>组件将字符串转换为数字

Question

我有一个Vuetify Datatable，可以使用<v-edit-dialog>组件进行内联编辑。

“卡路里”列的值是数字，但是当我编辑它们时，默认情况下它们会转换为字符串，我希望它们保留为数字。例如，如果我将“冷冻酸奶的卡路里”从159更改为30，则该值将成为字符串“ 30”。

代码段

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

我认为使用v-model.number和type=number可以解决问题，但这种情况仍在发生。

这是一支笔，您可以在其中复制我的问题：

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

Answer 1

v-model.number正确地将其更改为数字，但是其他一些内容将其更改为字符串，可能是.sync修饰符。
从.sync中删除:return-value.sync修饰符，它应该可以工作。