动态隐藏 v-text-field

Question

我是 Vue 和 Vuetify 的新手，所以对我很陌生。

我正在使用 Vuetify 中的 slider - 请参阅此处获取 CodePen： https://codepen.io/parseltongue/pen/Pobzpez

我试图在 slider 之前和之后有文本，所以我使用了v-text ，如下所示：

          <v-text
                  slot="prepend"
                  >
            Pre-Pended Text
          </v-text>
          
          
          <v-text
                  slot="append"
                  >
            Post-Pended Text
          </v-text>

但是，slider 已经有一个数字字段覆盖了后置文本：

               <template v-slot:append>
                <v-text-field
                  :rules = "rules"
                  v-model="slider"
                  class="mt-0 pt-0"
                  persistent-hint
                  single-line
                  type="number"
                  style="width: 60px"
                  
                ></v-text-field>

我正在尝试根据 data() 字段中的值动态隐藏该字段，以便显示后置文本（该值称为disabled ）。 因此，如果disabled设置为 true，我希望隐藏数字字段并且后挂文本消失。 我尝试使用v-if ，但后置文本从未出现。

有什么想法吗？

Answer 1

将您的 append v-text放入带有v-slot:append

              <template v-slot:append>
              <v-text v-if="disabled">
                Post-Pended Text
              </v-text>
                <v-text-field
                  v-else
                  :rules = "rules"
                  v-model="slider"
                  class="mt-0 pt-0"
                  persistent-hint
                  single-line
                  type="number"
                  style="width: 60px"
                ></v-text-field>

              </template>