vue tel 입력 국가 코드를 얻으려면 어떻게 해야 하나요?

vue tel 입력 국가 코드를 얻으려면 어떻게 해야 하나요?

내 컴포넌트

<v-form>
  <v-container>
    <v-row>        
      <v-col cols="12" sm="6" md="3">
        <vue-tel-input v-model="phone"></vue-tel-input>
      </v-col>
    </v-row>
  </v-container>
  <v-btn
    color="success"
    @click="submit"
  >
    submit
  </v-btn>
</v-form>

[전송]을 클릭하면 전화만 나옵니다.국가번호도 어떻게 받을 수 있나요?

[참고 자료] https://www.npmjs.com/package/vue-tel-input-vuetify

[코드펜] https://codepen.io/positivethinking639/pen/YzzjzWK?&editable=true&editors=101

인 것 같다vue-tel-input를 제공하다country-changed심지어 처음으로 발사되어 물체를 반환한다고 합니다.

Object {
   areaCodes: null,
   dialCode: "31",
   iso2: "NL",
   name: "Netherlands (Nederland)",
   priority: 0
}

따라서 이 이벤트핸들러를 컴포넌트에 추가할 수 있습니다.또, 전화기의 값과 같이, 국가 코드를 컴포넌트에 보존할 수 있습니다.

HTML 부품

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
      <v-btn
        color="success"
        @click="submit"
      >
        submit
      </v-btn>
    </v-form>
  </v-app>
</div>

JS 부품

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      phone: null,
      country: null
    }
  },
  methods: {
    countryChanged(country) {
      this.country = country.dialCode
    },
    submit() {
      console.log(this.phone);
      console.log(this.country);
    }
  }
});

여기에서는 동작하는 버전을 확인할 수 있습니다.https://codepen.io/otuzel/pen/PooBoQW?editors=1011

메모: 매일 Vue를 사용하지 않기 때문에 이벤트 핸들러를 통해 데이터를 변경하는 것이 최선인지 잘 모르겠습니다.

<vue-tel-input v-model="phone" v-bind="bindProps"></vue-tel-input>

data() {
  return {
    phone: null,
    bindProps:{
      mode: 'international'
    }
  }
}

에서 달성할 수 있습니다.vue-tel-input@3.1.1받침대 설치로mode: 'international'이 경우 전화번호는 항상 +123 123 123 123으로 변환됩니다.

언급URL : https://stackoverflow.com/questions/58787749/how-can-i-get-country-code-on-vue-tel-input