使用 Vuetify 进行动态计算

问题描述

我正在尝试使用 Vuetify 创建动态计算器。这是我的代码

<v-row class="mt-8 align-self-center">
    <v-col cols="2">
         <v-text-field :value="weight" label="Weight (kg)" placeholder="Type here" filled rounded></v-text-field>
    </v-col>
    <v-col cols="2">
         <v-text-field :value="distance"  label="distance (km)" placeholder="Type here" filled rounded></v-text-field>
    </v-col>
</v-row>
<v-card v-model="result" height="100" width="500">
                Estimated shipping cost is: {{result}}
</v-card>

这是我的脚本

export default {
    data() {
        return {
            inputdistance: '',inputWeight: '',result: ''
        }
    },computed: {
        result: function(){
            var totalCost = this.inputdistance * this.inputWeight *2000;
            return totalCost;
        }
    }
}

我也尝试过使用 v-model 但它仍然不起作用。知道我想写什么吗？ 谢谢！

解决方法

将 :value 中的 v-model 替换为 v-text-field，使用变量名称，然后从 v-model 中删除 v-card。

<v-row class="mt-8 align-self-center">
    <v-col cols="2">
         <v-text-field v-model="inputWeight" label="Weight (kg)" placeholder="Type here" filled rounded></v-text-field>
    </v-col>
    <v-col cols="2">
         <v-text-field v-model="inputDistance"  label="Distance (km)" placeholder="Type here" filled rounded></v-text-field>
    </v-col>
</v-row>
<v-card height="100" width="500">
                Estimated shipping cost is: {{result}}
</v-card>

然后在计算中使用 parseFloat

export default {
    data() {
        return {
            inputDistance: '',inputWeight: '',/** removed result variable **/
        }
    },computed: {
        result: function(){
            var totalCost = parseFloat(this.inputDistance,10) * parseFloat(this.inputWeight,10) *2000;
            return totalCost;
        }
    }
}