使用 vue3-tel-input。为什么 v-model 指令不起作用

Question

我想在 vuejs 3 上的应用程序中使用这个库intl-tel-input。有一个现成的组件vue3-tel-input。

问题：指令 v-model 不起作用 - 作为模型传递到组件的数据变量不会更改。

从组件发出的每个输入事件都会工作三次 - 在控制台中可见。

沙盒

此致。

Answer 1

v-model不起作用，vue3-tel-input因为该组件尚未将其v-model实现迁移到 Vue 3。该组件似乎已完成的唯一迁移是插件安装。

在 Vue 2 中，模型属性被命名"value"，模型更新事件为"input"。然而在 Vue 3 中，它们已分别重命名为"modelValue"和"update:modelValue"。注意vue3-tel-input 仍然如何使用"value"and "input"。

解决方法是让消费者组件手动绑定value和监听事件，从而在父组件中input有效地实现 Vue 2 ：v-model

<template>
  <vue-tel-input :value="phone" @input="onInput"></vue-tel-input>
  <div>{{ phone }}</div>
</template>

<script>
import { VueTelInput } from 'vue3-tel-input'
import 'vue3-tel-input/dist/vue3-tel-input.css'

export default {
  components: {
    VueTelInput
  },
  data() {
    return {
      phone: '+79991234567',
    }
  },
  methods: {
    onInput(phone, phoneObject, input) {
      if (phoneObject?.formatted) {
        this.phone = phoneObject.formatted
      }
    }
  }
}
</script>

演示