Как я могу объединить ввод vue tel с вводом текста vuetify?

Question

Мой код выглядит так:

<v-row>        
    <v-col cols="12" sm="6" md="3">
    <v-text-field
        label="Phone"
        outlined 
        dense
    ></v-text-field>
    </v-col>
    <v-col cols="12" sm="6" md="3">
    <vue-tel-input v-model="phone"></vue-tel-input>
    </v-col>
</v-row>

Мой кодекс выглядит так: https://codepen.io/positivethinking639/pen/qBBKYON?&editable=true&editors=101

Я хочу объединить его так:

Синий знак взят из ввода vue tel. Текстовое поле рядом с ним взято из компонента vuetify

Как мне объединить 2 разных компонента в один, как на картинке выше?

Answer 1

Да, можно установить код страны рядом с раскрывающимся списком

Вот рабочий код ручки: https://codepen.io/chansv/pen/pooZJey?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              label="Phone"
              outlined 
              dense
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" @country-changed="countrySelected">
              <template v-slot:arrow-icon>
                <v-icon>arrow_drop_down</v-icon>
                <strong>+{{countryCode}}</strong>
               </template>
            </vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
    data() {
      return {
        phone: null,
       countryCode: null,
      }
    },
    methods: {
  countrySelected(val) {
    this.countryCode = val.dialCode;
  }
}
})