CODEWITHSUNDEEP
vue.jsvuejs3primevue
Khalil DaNish
Khalil DaNish

Reputation: 557

V-model is not accessible when using :Value on my APP (Vue3)

I'm creating a test app and I'm trying to set the default value of the field by calculation of other fields so this is my code:

<input type="text" class="sc table-input" v-model="staff['all_total']" :value="(staff.salary + Number(staff['overtime']) + Number(staff['educational']) + Number(staff['finance']) + Number(staff['macul']))" />

By this, I want to combine four fields (overtime + educational + finance + macul) values and add it to another field called 'all_total' then the 'all_total' also will be used for some other calculations but it's all working the only problem is I don't have access to 'all_total' anymore if I remove the property of ':value' I can't access the 'all_total' v-model if I add ':value' then I can't access. Does anyone know what's wrong with this?

Upvotes: 0

Views: 573

Answers (1)

Gasanov
Gasanov

Reputation: 3399

v-model is just a syntax sugar, which means when you write:

<input v-model="staff['all_total']" />

you are getting:

<input :value="staff['all_total']" @input="staff['all_total'] = $event.target.value"/>

So when you use both v-model and :value in your code, :value will be used and you will not get access to staff['all_total'].

If your goal is to prepopulate staff['all_total'], it's better to do it in code, probably mounted. If your goal is to just show some composed value, which is based on those 4 fields, use computed instead.

Upvotes: 1

Related Questions