Unexpected 0 in mask

[Troum]

Good day,

I don't know why, but I got unexpected 0 in my phone number field

I don't have any 0 in my mask:

+49(####)###-#### - it's mask for screenshot

But I got +49(0 in field

<template>
  <v-card flat width="60%">
    <v-card-title class="font-weight-bold">Billing information</v-card-title>
    <v-card-subtitle class="text-body-2">This information must be kept current to ensure your account continues to be active</v-card-subtitle>
    <v-form>
      <v-card-text>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field type="text" placeholder="First name" v-model="settings['first_name']"></v-text-field>
          </v-col>
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field type="text" placeholder="Last Name" v-model="settings['last_name']"></v-text-field>
          </v-col>
        </v-row>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="12">
            <v-text-field placeholder="Company Name"></v-text-field>
          </v-col>
        </v-row>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="6">
            <v-select placeholder="Country"
                      :items="settings.countries"
                      v-model="settings.address.country"
                      item-text="name"
                      item-value="code"></v-select>
          </v-col>
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="State/Region"></v-text-field>
          </v-col>
        </v-row>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="City"></v-text-field>
          </v-col>
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="Postal Code"></v-text-field>
          </v-col>
        </v-row>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="Street Address"></v-text-field>
          </v-col>
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="Suite/Unit"></v-text-field>
          </v-col>
        </v-row>
        <v-row class="pa-0">
          <v-col class="py-0" cols="12" lg="6">
            <masked-input-field-component
                v-model="phoneNumber"
                label="Phone Number"
                placeholder="Phone number"
                v-bind:properties="{
                  readonly: false,
                  disabled: false,
                  outlined: false,
                  clearable: true,
                }"
                v-bind:options="{
                  humanMask: phoneMask,
                  machineMask: '###########',
                  empty: null,
                  applyAfter: false,
                  alphanumeric: true,
                  lowerCase: false,
                }"
            />
          </v-col>
          <v-col class="py-0" cols="12" lg="6">
            <v-text-field placeholder="VAT ID"></v-text-field>
          </v-col>
        </v-row>
      </v-card-text>
      <v-card-actions class="px-4">
        <v-btn type="submit" color="primary">Save Settings</v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<script>
import countries from "@/static/countries.json"
import MaskedInputFieldComponent from "../MaskedInputFieldComponent";

export default {
  name: "SettingsTabContent",
  components: {MaskedInputFieldComponent},
  props: {
    billingData: Object
  },
  data () {
    return {
      countries: countries
    }
  },
  mounted() {
  },
  methods: {
  },
  computed: {
    settings () {
      return this.billingData
    },
    phoneMask () {
      // eslint-disable-next-line no-prototype-builtins
      if (this.settings.address.country && this.countries['phoneMask'].hasOwnProperty(this.settings.address.country) ) {
        return this.countries['phoneMask'][this.settings.address.country]
      } else {
        return this.countries['phoneMask']['DE']
      }
    },
    phoneNumber: {
      get () {
        return this.settings.phone_number
      },
      set (value) {
        this.settings.phone_number = value
      }
    }
  }
}
</script>

<style scoped>

</style>

I use dynamic input mask based on country code that I choose in select field

What am I doing wrong?

[quatroka]

I have the same problem, I solved with workaround like this:

<...>
data() {
    return {
      form: {
        id: null,
        name: null
      }
    }
  },
mounted() {
  this.form = {
    ...this.form,
    ...objectToFillForm
  }
}
<...>