vue.js - Can't get @gmap-vuev3 Autocomplete to work with a custom input component on Nuxt 3 - Stack Overflow

admin管理员组

文章数量:1129050

I'm migrating a Nuxt 2 (+ gmap-vue) app to Nuxt 3 (+ @gmap-vue/v3).

Here is the Autocomplete integration (I've stripped some non-relevant attributes):

<GmvAutocomplete>
  <template v-slot:default="slotProps">
    <Input
      ref="input"
      :listeners="slotProps.listeners"
      :attrs="slotProps.attrs"
    />
  </template>
</GmvAutocomplete>

And this is my custom Input component (or rather it's template):

<template>
  <input
      :name="name"
      :id="name"
      ref="input"
      :value="modelValue"
      @input="handleOnInput"
      v-bind="$attrs"
  />
</template>

It throws the following error in the browser's console:

autocomplete-input-CU6sc4MS-HMP3QPYX.js?v=4893d728:57
Uncaught (in promise) Error: we can find the template ref: 'gmvAutoCompleteInput'
or we can't use the slotRef prop

It worked fine in Nuxt 2. What am I missing here?

I've tried adding slotRef='input', slotRef='gmvAutoCompleteInput' and ref='gmvAutoCompleteInput' to both the parent (<Input />) and the child (<input />), but no luck.

本文标签： vuejsCan39t get gmapvuev3 Autocomplete to work with a custom input component on Nuxt 3Stack Overflow