Динамически скрыть v-текстовое поле

Question

Я новичок в Vue и Vuetify, так что откровенен со мной.

Я работаю со слайдером в Vuetify - смотрите здесь CodePen: https://codepen.io/parseltongue/pen/Pobzpez

Я пытаюсь разместить текст до и после слайдера, поэтому использовал v-text вот так:

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

Однако в ползунке уже есть числовое поле, которое заменяет добавленный текст:

                     <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задано значение true, я хочу, чтобы числовое поле было скрыто, а текст, добавленный в конце, исчез. Я пробовал использовать v-if, но вставленный текст никогда не появляется.

есть идеи?

Answer 1

Поместите приложение 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>