[Vuejs]-Vue-smart-route with vuetify

by

0👍

✅

I’m 99% sure that vue-smart-route doesn’t work with the Vuetify’s <v-text-field/> because it probably expects an exact <input> HTML element, while <v-text-field/> creates a much more complex DOM structure. It’s something like this and the <input> tag is deeply nested:

<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
    <div class="v-input__control">
        <div class="v-input__slot">
            <div class="v-text-field__slot">
                <label for="input-1752" class="v-label v-label--active theme--light"
                    style="left: 0px; right: auto; position: absolute;">Label</label><input id="input-1752"
                    type="text" />
            </div>
        </div>
        <div class="v-text-field__details">
            <div class="v-messages theme--light">
                <div class="v-messages__wrapper"></div>
            </div>
        </div>
    </div>
</div>

So in this case I see 2 options: Create your own custom input similar to this one if you want to stick to these styles or branch vue-smart-route and make it work with this DOM structure. I hope this helps.

Leave a comment