Dynamically hide a v-text-field

I'm new to Vue and Vuetify, so bare with me.

I'm working with a slider in Vuetify -- see here for a CodePen: https://codepen.io/parseltongue/pen/Pobzpez

I'm trying to have text before and after the slider, so I have used v-text like so:

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

However, the slider already has a number field which is overriding the post-pended 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>

I'm trying to dynamically hide that field based upon a value in the data() field so that the post-pended text will appear (the value is called disabled). So if disabled is set to true, I want the number field to be hidden and the post-pended text to disappear. I tried using v-if, but the post-pended text never appears.

Any thoughts?

Put your the append v-text to template with 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>