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

Question

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

Calories 列值是数字，但是当我编辑它们时，默认情况下它们会转换为字符串，我希望它们保持为数字。例如，如果我将冷冻酸奶卡路里从 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