1

我是 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，但后置文本从未出现。

有什么想法吗？

4

1 回答 1

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>
于 2021-02-24T06:32:51.910 回答