使用 Vuetify 进行动态计算答案

【问题标题】：Dynamic calculation using Vuetify使用 Vuetify 进行动态计算
【发布时间】：2021-01-21 15:11:42
【问题描述】：

我正在尝试使用 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，但它仍然不起作用。知道我想写什么吗？谢谢！

【问题讨论】：

我的解决方案有效吗？
如果您的问题得到解决..请考虑接受我的回答..谢谢 :)
@Amaarrockz 是的，它有效，非常感谢！抱歉，我刚刚检查了这个:)

标签： vue.js vuetify.js dynamic-forms

【解决方案1】：

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

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

【讨论】：