vue.jsvuetify.jsdynamic-forms

Dynamic calculation using Vuetify


I'm trying to create dynamic calculator using Vuetify. Here's my code

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

and here's my script

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

I have tried using v-model too but it still doesn't work. Any idea on what I suppose to write? Thanks!


Solution

  • replace :value with v-model in your v-text-field, use the variable names and then remove v-model from 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>
    

    and then use parseFloat in computed

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