[Vuejs]-Vuetify 2->3 v-text-field child alignment (prepend-inner and append seem to be ignored)

by

1👍

✅

Positioning is not working because you are using deprecated slot syntax:

slot="prepend-inner" ...

is now

v-slot:prepend-inner>

or the short-hand

#prepend-inner

also, you have to put the slot declaration on a template, it does not work on components directly anymore:

<template v-slot:prepend-inner>
  <v-select
    ...

With this, the slots work, however, nesting the VSelect in a VTextField does not seem to work, looks like the text field does not allow to open the select. Also, there is an issue with spacing. I am pretty sure there are more problems. I think, even with the slots, you will have to build it another way.

Have a look at it on the playground

When the :auto prop is set the select menu will be positioned so that the selected item is positioned where the select box is. So instead of dropping up or dropping down, the menu opens in both directions. Here is a pen if it helps, just look at where the menu opens depending on the selected item.

👤Moritz Ringler

Leave a comment