如何摆脱或覆盖vuetify的v-textarea底部边框？

Question

我试图在v-textarea中去掉Vuetify的默认下划线，而不是使用flat和solo。这是我的代码：

    <v-textarea
      v-model="card.todo"
      placeholder="New item"
      class="text-area"
      auto-grow
      rows="1"
      row-height="10"
      @keyup="update_card"
    ></v-textarea>

下面是它的渲染方式：

<div class="v-input__slot"><div class="v-text-field__slot"><textarea id="input-105" placeholder="New item" rows="1" style="height: 84px;"></textarea></div></div>

我相信这与输入“v-class=__class=”有关，因为当我删除该行时，下划线就消失了。

Answer 1

试试这个：

.v-input.v-textarea>.v-input__control>.v-input__slot:before {
    border: none;
}

请注意，这将清除所有类的边界，所以如果您不想使用v-textarea或id，请使用它！