动态隐藏 v-text-field答案

【问题标题】：Dynamically hide a v-text-field动态隐藏 v-text-field
【发布时间】：2021-02-24 06:11:51
【问题描述】：

我是 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）。所以如果disabled 设置为true，我希望数字字段被隐藏并且后置文本消失。我尝试使用v-if，但未显示后置文本。

有什么想法吗？

【问题讨论】：

标签： javascript vue.js vuetify.js v-slot

【解决方案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>

【讨论】：