Vue. v-text field/ v-model-CodePudding

i have problem with a fields in form, where i used coordinates. I have 2 fields: latitude and length. Every time when i change one of them, they automatically saved changes before i press submit button. Probably it's problem with v-model. I tried to used v-bind, but unfortunately problem still exists.

This is my example for latitude: 

`<v-text-field
  v-model:attribute="address.coordinates.lat"
  :label="$t('dialog.label.latitude')"
  :rules="coordinatesRules"
  step="0.010"
  type="number"`


`
And length:

`<v-text-field
  v-model:attribute="address.coordinates.len"
  :label="$t('dialog.label.len')"
  :rules="coordinatesRules"
  step="0.010"
  type="number"`
`

CodePudding user response：

To prevent the values of the lat and len fields from being saved automatically, you can use the lazy modifier on the v-model directive. This will cause the values to only be updated when the input events specified in the v-model directive are triggered (e.g. change or blur events).

Here is an example of how you can use the lazy modifier in your code:

<v-text-field
  v-model.lazy="address.coordinates.lat"
  :label="$t('dialog.label.latitude')"
  :rules="coordinatesRules"
  step="0.010"
  type="number"
/>

<v-text-field
  v-model.lazy="address.coordinates.len"
  :label="$t('dialog.label.len')"
  :rules="coordinatesRules"
  step="0.010"
  type="number"
/>

In this example, the values of the lat and len fields will only be updated when the input event specified by the v-model directive (e.g. change or blur) is triggered. This will prevent the values from being updated automatically when they are changed.

Keep in mind that the lazy modifier only works with the v-model directive, and will not work with the v-bind directive. If you want to use the v-bind directive, you will need to use a different approach to prevent the values from being saved automatically.