vue-智能路由和vuetify

Question

我正在使用包vue智能路由在我的应用程序中创建一个搜索功能。因为这些风格都在使用vuetify。问题是，当我使用vuetify组件时，它不起作用。

将它与vuetify组件一起使用：

<v-text-field v-model="search" v-smart-routes="routes" class="mr-4" :label="$t('search') + '...'" hide-details append-icon="mdi-magnify" />

那不管用。

纯html

<input class="mr-4" type="text" v-model="search" v-smart-routes="routes">

这是有效的，但我想要添加vuetify风格。

我怎样才能使虚拟组件工作呢？

Answer 1

我确信vue-smart-route不适用于Vuetify的<v-text-field/>，因为它可能需要一个精确的<input> HTML元素，而<v-text-field/>则创建一个更加复杂的DOM结构。就像这样，<input>标记嵌套得很深：

<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>

因此，在本例中，我看到了两个选项:创建与此类似的自定义输入，如果您希望坚持这些样式或分支vue-smart-route并使其与此DOM结构一起工作的话。我希望这能帮到你。