动态隐藏一个 v-text-field

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>

但是，滑块已经有一个数字字段，它覆盖了 post-pended 文本：

               <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() 字段中的值动态隐藏该字段，以便显示 post-pended 文本（该值称为 disabled）。因此，如果 disabled 设置为 true，我希望数字字段被隐藏并且 post-pended 文本消失。我尝试使用 v-if，但 post-pended 文本从未出现。

有什么想法吗？

Answer 1

使用 v-slot:append

将您的 v-text 附加到模板

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